@operato/process 8.0.0-alpha.5 → 8.0.0-alpha.50

package/CHANGELOG.md

@@ -3,6 +3,241 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.50](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.49...v8.0.0-alpha.50) (2024-11-16)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.49](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.48...v8.0.0-alpha.49) (2024-11-13)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.48](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.47...v8.0.0-alpha.48) (2024-11-13)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.46](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.45...v8.0.0-alpha.46) (2024-10-23)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.45](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.44...v8.0.0-alpha.45) (2024-10-23)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.44](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.43...v8.0.0-alpha.44) (2024-10-23)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.43](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.42...v8.0.0-alpha.43) (2024-10-22)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.42](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.41...v8.0.0-alpha.42) (2024-10-21)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.41](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2024-10-21)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.37](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
+
+
+### :bug: Bug Fix
+
+* update dev-dependencies version ([d6fe342](https://github.com/heartyoh/ioperato/commit/d6fe342de738c6bad3528550a862b5a1d2573161))
+
+
+
+## [8.0.0-alpha.34](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.33...v8.0.0-alpha.34) (2024-10-15)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.33](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.32...v8.0.0-alpha.33) (2024-10-14)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.30](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.29...v8.0.0-alpha.30) (2024-10-11)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.29](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.28...v8.0.0-alpha.29) (2024-10-10)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.27](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.26...v8.0.0-alpha.27) (2024-10-06)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.26](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.25...v8.0.0-alpha.26) (2024-10-06)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.21](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.20...v8.0.0-alpha.21) (2024-10-05)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.20](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.19...v8.0.0-alpha.20) (2024-10-04)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.19](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.18...v8.0.0-alpha.19) (2024-10-04)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.16](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.15...v8.0.0-alpha.16) (2024-10-03)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.15](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.14...v8.0.0-alpha.15) (2024-10-03)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.14](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.13...v8.0.0-alpha.14) (2024-10-02)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.12](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.11...v8.0.0-alpha.12) (2024-09-23)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.11](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.10...v8.0.0-alpha.11) (2024-09-21)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.10](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.9...v8.0.0-alpha.10) (2024-09-18)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.9](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.8...v8.0.0-alpha.9) (2024-09-15)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.8](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.7...v8.0.0-alpha.8) (2024-09-15)
+
+
+### :bug: Bug Fix
+
+* synchronize ox-process-creation-popup with ox-board-creation-popup ([eb4d739](https://github.com/heartyoh/ioperato/commit/eb4d739c0ac04c2475b32b2a3423b29b6404b223))
+* template viewer for board and process ([535433c](https://github.com/heartyoh/ioperato/commit/535433c7227190714a14cc0d1089a99e1075a381))
+
+
+
+## [8.0.0-alpha.7](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.6...v8.0.0-alpha.7) (2024-09-14)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [8.0.0-alpha.6](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.5...v8.0.0-alpha.6) (2024-09-14)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
 ## [8.0.0-alpha.5](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.4...v8.0.0-alpha.5) (2024-09-12)
 
 **Note:** Version bump only for package @operato/process

package/dist/src/index.d.ts

@@ -3,3 +3,4 @@ export { DataStorage } from './data-storage/data-storage.js';
 export * from './ox-process-viewer.js';
 export * from './ox-process-modeller.js';
 export * from './ox-process-list.js';
+export * from './ox-process-template-viewer.js';

package/dist/src/index.js

@@ -3,4 +3,5 @@ export { DataStorage } from './data-storage/data-storage.js';
 export * from './ox-process-viewer.js';
 export * from './ox-process-modeller.js';
 export * from './ox-process-list.js';
+export * from './ox-process-template-viewer.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAE5D,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './types.js'\n\nexport { DataStorage } from './data-storage/data-storage.js'\n\nexport * from './ox-process-viewer.js'\nexport * from './ox-process-modeller.js'\nexport * from './ox-process-list.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAE5D,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iCAAiC,CAAA","sourcesContent":["export * from './types.js'\n\nexport { DataStorage } from './data-storage/data-storage.js'\n\nexport * from './ox-process-viewer.js'\nexport * from './ox-process-modeller.js'\nexport * from './ox-process-list.js'\nexport * from './ox-process-template-viewer.js'\n"]}

package/dist/src/ox-process-template-viewer.d.ts

@@ -0,0 +1,27 @@
+import '@material/web/icon/icon.js';
+import '@material/web/fab/fab.js';
+import { LitElement, PropertyValues } from 'lit';
+export declare class ProcessTemplateViewer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    processTemplate: any;
+    _scene: any;
+    _target: HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+    private resizeHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    initScene(): void;
+    closeScene(): void;
+    releaseScene(): void;
+    setupScene({ id, scene }: {
+        id: string;
+        scene: any;
+    }): void;
+    getSceneImageData(base64?: boolean): Promise<{
+        width: any;
+        height: any;
+        data: string | Uint8ClampedArray;
+    } | undefined>;
+    printTrick(image: string): Promise<void>;
+}

package/dist/src/ox-process-template-viewer.js

@@ -0,0 +1,178 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/fab/fab.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { create, SCENE_MODE } from '@hatiolab/things-scene';
+import { ScrollbarStyles } from '@operato/styles';
+let ProcessTemplateViewer = class ProcessTemplateViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.processTemplate = {};
+        this._scene = null;
+        this.resizeHandler = () => {
+            this._scene && this._scene.fit();
+        };
+    }
+    render() {
+        return html ` <div id="target"></div> `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.resizeHandler);
+        window.addEventListener('orientationchange', this.resizeHandler);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.resizeHandler);
+        window.removeEventListener('orientationchange', this.resizeHandler);
+        super.disconnectedCallback();
+        this.closeScene();
+    }
+    updated(changes) {
+        if (changes.has('processTemplate')) {
+            this.closeScene();
+            if (this.processTemplate && this.processTemplate.id) {
+                this.initScene();
+            }
+        }
+    }
+    initScene() {
+        if (!this.processTemplate || !this.processTemplate.id)
+            return;
+        this._scene = create({
+            model: {
+                ...this.processTemplate.model
+            },
+            mode: SCENE_MODE.VIEW
+        });
+        this.setupScene({ id: this.processTemplate.id, scene: this._scene });
+    }
+    closeScene() {
+        if (this._scene) {
+            this._scene.target = null;
+            this._scene.release && this._scene.release();
+            this._scene = null;
+        }
+    }
+    releaseScene() {
+        this.closeScene();
+    }
+    setupScene({ id, scene }) {
+        var _a;
+        this._scene = scene;
+        const backgroundColor = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.state.fillStyle;
+        if (typeof backgroundColor === 'string') {
+            this.style.backgroundColor = backgroundColor;
+        }
+        else {
+            this.style.backgroundColor = 'initial';
+        }
+        /* scene의 기존 target을 보관한다. */
+        this._scene.fit(this._scene.fitMode);
+        this._scene.target = this._target;
+    }
+    /* event handlers */
+    async getSceneImageData(base64 = false) {
+        if (!this._scene) {
+            return;
+        }
+        var { width, height } = this._scene.model;
+        var pixelRatio = window.devicePixelRatio;
+        // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.
+        var canvas = document.createElement('canvas');
+        canvas.width = Number(width);
+        canvas.height = Number(height);
+        var root = this._scene.root;
+        // 2. 모델레이어의 원래 위치와 스케일을 저장한다.
+        var translate = root.get('translate');
+        var scale = root.get('scale');
+        // 3. 위치와 스케일 기본 설정.
+        root.set('translate', { x: 0, y: 0 });
+        root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio });
+        // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.
+        var context = canvas.getContext('2d');
+        root.draw(context);
+        root.set('translate', translate);
+        root.set('scale', scale);
+        var data = base64 ? canvas.toDataURL() : context.getImageData(0, 0, width, height).data;
+        return {
+            width,
+            height,
+            data
+        };
+    }
+    async printTrick(image) {
+        var _a;
+        var viewTarget = null;
+        var printTarget = null;
+        if (!image) {
+            image = (_a = (await this.getSceneImageData(true))) === null || _a === void 0 ? void 0 : _a.data;
+        }
+        printTarget = document.createElement('img');
+        printTarget.id = 'target';
+        printTarget.src = image;
+        printTarget.style.width = '100%';
+        printTarget.style.height = '100%';
+        const x = (mql) => {
+            if (mql.matches) {
+                if (!viewTarget) {
+                    viewTarget = this.renderRoot.getElementById('target');
+                    this.renderRoot.replaceChild(printTarget, viewTarget);
+                }
+            }
+            else {
+                this.renderRoot.replaceChild(viewTarget, printTarget);
+                printTarget.remove();
+                mediaQueryList.removeEventListener('change', x);
+            }
+        };
+        if (window.matchMedia) {
+            var mediaQueryList = window.matchMedia('print');
+            mediaQueryList.addEventListener('change', x);
+        }
+    }
+};
+ProcessTemplateViewer.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        position: relative;
+
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        overflow: hidden;
+      }
+
+      #target {
+        flex: 1;
+
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        height: 100%;
+
+        outline: 0;
+      }
+
+      @media print {
+        md-fab,
+        md-icon {
+          display: none;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ProcessTemplateViewer.prototype, "processTemplate", void 0);
+__decorate([
+    state()
+], ProcessTemplateViewer.prototype, "_scene", void 0);
+__decorate([
+    query('#target')
+], ProcessTemplateViewer.prototype, "_target", void 0);
+ProcessTemplateViewer = __decorate([
+    customElement('ox-process-template-viewer')
+], ProcessTemplateViewer);
+export { ProcessTemplateViewer };
+//# sourceMappingURL=ox-process-template-viewer.js.map

package/dist/src/ox-process-template-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-process-template-viewer.js","sourceRoot":"","sources":["../../src/ox-process-template-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { create, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-process-template-viewer')\nexport class ProcessTemplateViewer extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        position: relative;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        overflow: hidden;\n      }\n\n      #target {\n        flex: 1;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        height: 100%;\n\n        outline: 0;\n      }\n\n      @media print {\n        md-fab,\n        md-icon {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) processTemplate: any = {}\n\n  @state() _scene: any = null\n\n  @query('#target') _target!: HTMLElement\n\n  render() {\n    return html` <div id=\"target\"></div> `\n  }\n\n  private resizeHandler = () => {\n    this._scene && this._scene.fit()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    window.addEventListener('resize', this.resizeHandler)\n\n    window.addEventListener('orientationchange', this.resizeHandler)\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.resizeHandler)\n    window.removeEventListener('orientationchange', this.resizeHandler)\n\n    super.disconnectedCallback()\n\n    this.closeScene()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('processTemplate')) {\n      this.closeScene()\n\n      if (this.processTemplate && this.processTemplate.id) {\n        this.initScene()\n      }\n    }\n  }\n\n  initScene() {\n    if (!this.processTemplate || !this.processTemplate.id) return\n\n    this._scene = create({\n      model: {\n        ...this.processTemplate.model\n      },\n      mode: SCENE_MODE.VIEW\n    })\n\n    this.setupScene({ id: this.processTemplate.id, scene: this._scene })\n  }\n\n  closeScene() {\n    if (this._scene) {\n      this._scene.target = null\n      this._scene.release && this._scene.release()\n\n      this._scene = null\n    }\n  }\n\n  releaseScene() {\n    this.closeScene()\n  }\n\n  setupScene({ id, scene }: { id: string; scene: any }) {\n    this._scene = scene\n\n    const backgroundColor = this._scene?.root.state.fillStyle\n    if (typeof backgroundColor === 'string') {\n      this.style.backgroundColor = backgroundColor\n    } else {\n      this.style.backgroundColor = 'initial'\n    }\n\n    /* scene의 기존 target을 보관한다. */\n\n    this._scene.fit(this._scene.fitMode)\n    this._scene.target = this._target\n  }\n\n  /* event handlers */\n  async getSceneImageData(base64 = false) {\n    if (!this._scene) {\n      return\n    }\n\n    var { width, height } = this._scene.model\n    var pixelRatio = window.devicePixelRatio\n\n    // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.\n    var canvas = document.createElement('canvas')\n    canvas.width = Number(width)\n    canvas.height = Number(height)\n\n    var root = this._scene.root\n    // 2. 모델레이어의 원래 위치와 스케일을 저장한다.\n    var translate = root.get('translate')\n    var scale = root.get('scale')\n\n    // 3. 위치와 스케일 기본 설정.\n    root.set('translate', { x: 0, y: 0 })\n    root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio })\n\n    // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.\n    var context = canvas.getContext('2d')\n\n    root.draw(context)\n\n    root.set('translate', translate)\n    root.set('scale', scale)\n\n    var data = base64 ? canvas.toDataURL() : context!.getImageData(0, 0, width, height).data\n\n    return {\n      width,\n      height,\n      data\n    }\n  }\n\n  async printTrick(image: string) {\n    var viewTarget: HTMLElement | null = null\n    var printTarget: HTMLImageElement | null = null\n\n    if (!image) {\n      image = (await this.getSceneImageData(true))?.data as string\n    }\n\n    printTarget = document.createElement('img')\n    printTarget.id = 'target'\n    printTarget.src = image\n    printTarget.style.width = '100%'\n    printTarget.style.height = '100%'\n\n    const x = (mql: MediaQueryListEvent) => {\n      if (mql.matches) {\n        if (!viewTarget) {\n          viewTarget = (this.renderRoot as ShadowRoot)!.getElementById('target')\n          this.renderRoot.replaceChild(printTarget!, viewTarget!)\n        }\n      } else {\n        this.renderRoot.replaceChild(viewTarget!, printTarget!)\n        printTarget!.remove()\n        mediaQueryList.removeEventListener('change', x)\n      }\n    }\n\n    if (window.matchMedia) {\n      var mediaQueryList = window.matchMedia('print')\n      mediaQueryList.addEventListener('change', x)\n    }\n  }\n}\n"]}

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

@@ -56,6 +56,11 @@ let ProcessCreationPopup = class ProcessCreationPopup extends localize(i18next)(
           flex: 1;
           overflow: hidden;
         }
+
+        md-text-button {
+          --_container-color: var(--md-sys-color-primary);
+          --_label-text-color: var(--md-sys-color-on-primary);
+        }
       `
         ];
     }

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

@@ -1 +1 @@
-{"version":3,"file":"process-creation-popup.js","sourceRoot":"","sources":["../../../src/selector/process-creation-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/select/filled-select.js'\nimport '@material/web/select/select-option.js'\nimport '../ox-process-template-list'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { OxProcessTemplateList } from '../ox-process-template-list'\n\n@customElement('process-creation-popup')\nexport class ProcessCreationPopup extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          flex-direction: column;\n          gap: 10px;\n          padding: 10px;\n\n          background-color: var(--md-sys-color-surface);\n        }\n\n        [body] {\n          flex: 1;\n\n          display: flex;\n          flex-direction: row;\n          gap: 10px;\n\n          overflow: hidden;\n        }\n\n        [content] {\n          flex: 1;\n\n          display: flex;\n          flex-direction: column;\n          gap: 10px;\n\n          overflow: auto;\n        }\n\n        [content] > md-filled-text-field[type='textarea'] {\n          flex: 1;\n          resize: none;\n        }\n\n        [templates] {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n        }\n\n        [templates] > ox-process-template-list {\n          flex: 1;\n          overflow: hidden;\n        }\n      `\n    ]\n  }\n\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups?: { id: string; name: string }[]\n\n  @query('ox-process-template-list') processTemplateList!: OxProcessTemplateList\n\n  render() {\n    var groups = this.groups || []\n\n    return html`\n      <div body>\n        <div content>\n          <md-filled-text-field\n            label=${String(i18next.t('label.name'))}\n            name=\"name\"\n            required\n            field-name\n          ></md-filled-text-field>\n          <md-filled-text-field\n            type=\"textarea\"\n            label=${String(i18next.t('label.description'))}\n            name=\"description\"\n            field-description\n          ></md-filled-text-field>\n          <md-filled-select\n            label=${String(i18next.t('label.group'))}\n            field-group\n            helper=\"If there is no group to choose, you can leave it empty.\"\n          >\n            ${groups.map(\n              group => html`\n                <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}\n                  >${group.name}</md-select-option\n                >\n              `\n            )}\n          </md-filled-select>\n        </div>\n\n        <div templates>\n          <div>${i18next.t('label.process-template')}</div>\n          <ox-process-template-list></ox-process-template-list>\n        </div>\n      </div>\n\n      <md-text-button @click=${(e: MouseEvent) => this.onClickSubmit()}\n        >${String(i18next.t('button.create'))}</md-text-button\n      >\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()\n    }, 100)\n  }\n\n  async onClickSubmit() {\n    var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {\n      return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value\n    })\n\n    if (!name) {\n      return\n    }\n\n    const template = await this.processTemplateList.getSelected()\n\n    this.dispatchEvent(\n      new CustomEvent('create-process', {\n        detail: {\n          name,\n          description,\n          groupId,\n          model: template?.model,\n          thumbnail: template?.thumbnail\n        }\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"process-creation-popup.js","sourceRoot":"","sources":["../../../src/selector/process-creation-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/select/filled-select.js'\nimport '@material/web/select/select-option.js'\nimport '../ox-process-template-list'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { OxProcessTemplateList } from '../ox-process-template-list'\n\n@customElement('process-creation-popup')\nexport class ProcessCreationPopup extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          flex-direction: column;\n          gap: 10px;\n          padding: 10px;\n\n          background-color: var(--md-sys-color-surface);\n        }\n\n        [body] {\n          flex: 1;\n\n          display: flex;\n          flex-direction: row;\n          gap: 10px;\n\n          overflow: hidden;\n        }\n\n        [content] {\n          flex: 1;\n\n          display: flex;\n          flex-direction: column;\n          gap: 10px;\n\n          overflow: auto;\n        }\n\n        [content] > md-filled-text-field[type='textarea'] {\n          flex: 1;\n          resize: none;\n        }\n\n        [templates] {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n        }\n\n        [templates] > ox-process-template-list {\n          flex: 1;\n          overflow: hidden;\n        }\n\n        md-text-button {\n          --_container-color: var(--md-sys-color-primary);\n          --_label-text-color: var(--md-sys-color-on-primary);\n        }\n      `\n    ]\n  }\n\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups?: { id: string; name: string }[]\n\n  @query('ox-process-template-list') processTemplateList!: OxProcessTemplateList\n\n  render() {\n    var groups = this.groups || []\n\n    return html`\n      <div body>\n        <div content>\n          <md-filled-text-field\n            label=${String(i18next.t('label.name'))}\n            name=\"name\"\n            required\n            field-name\n          ></md-filled-text-field>\n          <md-filled-text-field\n            type=\"textarea\"\n            label=${String(i18next.t('label.description'))}\n            name=\"description\"\n            field-description\n          ></md-filled-text-field>\n          <md-filled-select\n            label=${String(i18next.t('label.group'))}\n            field-group\n            helper=\"If there is no group to choose, you can leave it empty.\"\n          >\n            ${groups.map(\n              group => html`\n                <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}\n                  >${group.name}</md-select-option\n                >\n              `\n            )}\n          </md-filled-select>\n        </div>\n\n        <div templates>\n          <div>${i18next.t('label.process-template')}</div>\n          <ox-process-template-list></ox-process-template-list>\n        </div>\n      </div>\n\n      <md-text-button @click=${(e: MouseEvent) => this.onClickSubmit()}\n        >${String(i18next.t('button.create'))}</md-text-button\n      >\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()\n    }, 100)\n  }\n\n  async onClickSubmit() {\n    var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {\n      return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value\n    })\n\n    if (!name) {\n      return\n    }\n\n    const template = await this.processTemplateList.getSelected()\n\n    this.dispatchEvent(\n      new CustomEvent('create-process', {\n        detail: {\n          name,\n          description,\n          groupId,\n          model: template?.model,\n          thumbnail: template?.thumbnail\n        }\n      })\n    )\n  }\n}\n"]}