@things-factory/organization 8.0.0-alpha.8 → 8.0.0-beta.1

package/client/bootstrap.ts

@@ -1,4 +1,8 @@
-import { registerEditor, registerRenderer } from '@operato/data-grist'
+import { registerEditor, registerRenderer, registerFilterRenderer } from '@operato/data-grist'
+
+import { FilterResourceCode } from '@operato/app/filters-form/filter-resource-code.js'
+import { FilterResourceObject } from '@operato/app/filters-form/filter-resource-object.js'
+import { FilterDepartmentObject } from './filters-form/filter-department-object.js'
 
 import { GristRendererDepartmentObject } from './grist-editor/grist-renderer-department-object'
 import { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object'
@@ -20,4 +24,9 @@ export default function bootstrap() {
   registerRenderer('approval-line', GristRendererApprovalLine)
   registerRenderer('assignees', GristRendererAssignees)
   registerRenderer('recipients', GristRendererRecipients)
+
+  registerFilterRenderer('code', [FilterResourceCode])
+  registerFilterRenderer('object', [FilterResourceObject])
+  registerFilterRenderer('resource-object', [FilterResourceObject])
+  registerFilterRenderer('department-object', [FilterDepartmentObject])
 }

package/client/filters-form/filter-department-object.ts

@@ -0,0 +1,11 @@
+import './ox-filter-department-object.js'
+
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from '@operato/data-grist'
+
+export const FilterDepartmentObject: FilterSelectRenderer = (column, value, owner) => {
+  return html`
+    <ox-filter-department-object name=${column?.name} .column=${column} .value=${value}></ox-filter-department-object>
+  `
+}

package/client/filters-form/ox-filter-department-object.ts

@@ -0,0 +1,136 @@
+import '../component/department-selector.js'
+
+import { css, html, TemplateResult } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+import { OxFormField } from '@operato/input'
+
+@customElement('ox-filter-department-object')
+export class OxFilterDepartmentObject extends OxFormField {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        position: relative;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+        min-width: 100px;
+
+        --ox-select-padding: var(--spacing-tiny);
+        --ox-select-font: var(--input-font);
+        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
+      }
+
+      div {
+        width: 100%;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: var(--ox-select-padding);
+        font: var(--ox-select-font);
+        color: var(--ox-select-color);
+      }
+
+      span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        gap: 4px;
+      }
+
+      md-icon {
+        --md-icon-size: 16px;
+        display: block;
+        text-align: right;
+        color: var(--ox-select-icon-color);
+        opacity: 0.7;
+      }
+
+      div:hover md-icon {
+        color: var(--md-sys-color-on-primary-container);
+      }
+    `
+  ]
+
+  @property({ type: Object }) column: any
+  @property({ type: String }) value?: string
+
+  @state() department?: any
+
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  render() {
+    var { name, description } = this.department || (this.value ? { name: this.value } : {})
+
+    return html`
+      <div @click=${this._onclick} @keydown=${this._onkeydown}>
+        <span tabindex="0" style="flex:1">${name || ''}${(description && `(${description})`) || ''}</span>
+        <md-icon>search</md-icon>
+      </div>
+    `
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.department = selected
+        ? {
+            id: selected.id,
+            controlNo: selected.controlNo,
+            name: selected.name,
+            description: selected.description
+          }
+        : null
+
+      this.value = this.department?.name
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true,
+          detail: this.value
+        })
+      )
+    }
+
+    var template =
+      this.template ||
+      html`
+        <department-selector
+          .value=${this.department || {}}
+          .confirmCallback=${confirmCallback.bind(this)}
+        ></department-selector>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select_item')
+    })
+  }
+}

package/dist-client/bootstrap.js

@@ -1,4 +1,7 @@
-import { registerEditor, registerRenderer } from '@operato/data-grist';
+import { registerEditor, registerRenderer, registerFilterRenderer } from '@operato/data-grist';
+import { FilterResourceCode } from '@operato/app/filters-form/filter-resource-code.js';
+import { FilterResourceObject } from '@operato/app/filters-form/filter-resource-object.js';
+import { FilterDepartmentObject } from './filters-form/filter-department-object.js';
 import { GristRendererDepartmentObject } from './grist-editor/grist-renderer-department-object';
 import { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object';
 import { GristEditorAssignees } from './grist-editor/grist-editor-assignees';
@@ -17,5 +20,9 @@ export default function bootstrap() {
     registerRenderer('approval-line', GristRendererApprovalLine);
     registerRenderer('assignees', GristRendererAssignees);
     registerRenderer('recipients', GristRendererRecipients);
+    registerFilterRenderer('code', [FilterResourceCode]);
+    registerFilterRenderer('object', [FilterResourceObject]);
+    registerFilterRenderer('resource-object', [FilterResourceObject]);
+    registerFilterRenderer('department-object', [FilterDepartmentObject]);
 }
 //# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC/F,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAA;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAA;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAA;AACnF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAEvF,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,2CAA2C;IAC3C,cAAc,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CAAA;IAChE,cAAc,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAA;IACxD,cAAc,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IACjD,cAAc,CAAC,YAAY,EAAE,qBAAqB,CAAC,CAAA;IAEnD,gBAAgB,CAAC,mBAAmB,EAAE,6BAA6B,CAAC,CAAA;IACpE,gBAAgB,CAAC,eAAe,EAAE,yBAAyB,CAAC,CAAA;IAC5D,gBAAgB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACrD,gBAAgB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;AACzD,CAAC","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { GristRendererDepartmentObject } from './grist-editor/grist-renderer-department-object'\nimport { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object'\nimport { GristEditorAssignees } from './grist-editor/grist-editor-assignees'\nimport { GristRendererAssignees } from './grist-editor/grist-renderer-assignees'\nimport { GristEditorRecipients } from './grist-editor/grist-editor-recipients'\nimport { GristRendererRecipients } from './grist-editor/grist-renderer-recipients'\nimport { GristEditorApprovalLine } from './grist-editor/grist-editor-approval-line'\nimport { GristRendererApprovalLine } from './grist-editor/grist-renderer-approval-line'\n\nexport default function bootstrap() {\n  /* register grist renderer/editor for id */\n  registerEditor('department-object', GristEditorDepartmentObject)\n  registerEditor('approval-line', GristEditorApprovalLine)\n  registerEditor('assignees', GristEditorAssignees)\n  registerEditor('recipients', GristEditorRecipients)\n\n  registerRenderer('department-object', GristRendererDepartmentObject)\n  registerRenderer('approval-line', GristRendererApprovalLine)\n  registerRenderer('assignees', GristRendererAssignees)\n  registerRenderer('recipients', GristRendererRecipients)\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAE9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,mDAAmD,CAAA;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAA;AAC1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAA;AAEnF,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC/F,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAA;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAA;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAA;AACnF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAEvF,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,2CAA2C;IAC3C,cAAc,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CAAA;IAChE,cAAc,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAA;IACxD,cAAc,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IACjD,cAAc,CAAC,YAAY,EAAE,qBAAqB,CAAC,CAAA;IAEnD,gBAAgB,CAAC,mBAAmB,EAAE,6BAA6B,CAAC,CAAA;IACpE,gBAAgB,CAAC,eAAe,EAAE,yBAAyB,CAAC,CAAA;IAC5D,gBAAgB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACrD,gBAAgB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAEvD,sBAAsB,CAAC,MAAM,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IACpD,sBAAsB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;IACxD,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;IACjE,sBAAsB,CAAC,mBAAmB,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAA;AACvE,CAAC","sourcesContent":["import { registerEditor, registerRenderer, registerFilterRenderer } from '@operato/data-grist'\n\nimport { FilterResourceCode } from '@operato/app/filters-form/filter-resource-code.js'\nimport { FilterResourceObject } from '@operato/app/filters-form/filter-resource-object.js'\nimport { FilterDepartmentObject } from './filters-form/filter-department-object.js'\n\nimport { GristRendererDepartmentObject } from './grist-editor/grist-renderer-department-object'\nimport { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object'\nimport { GristEditorAssignees } from './grist-editor/grist-editor-assignees'\nimport { GristRendererAssignees } from './grist-editor/grist-renderer-assignees'\nimport { GristEditorRecipients } from './grist-editor/grist-editor-recipients'\nimport { GristRendererRecipients } from './grist-editor/grist-renderer-recipients'\nimport { GristEditorApprovalLine } from './grist-editor/grist-editor-approval-line'\nimport { GristRendererApprovalLine } from './grist-editor/grist-renderer-approval-line'\n\nexport default function bootstrap() {\n  /* register grist renderer/editor for id */\n  registerEditor('department-object', GristEditorDepartmentObject)\n  registerEditor('approval-line', GristEditorApprovalLine)\n  registerEditor('assignees', GristEditorAssignees)\n  registerEditor('recipients', GristEditorRecipients)\n\n  registerRenderer('department-object', GristRendererDepartmentObject)\n  registerRenderer('approval-line', GristRendererApprovalLine)\n  registerRenderer('assignees', GristRendererAssignees)\n  registerRenderer('recipients', GristRendererRecipients)\n\n  registerFilterRenderer('code', [FilterResourceCode])\n  registerFilterRenderer('object', [FilterResourceObject])\n  registerFilterRenderer('resource-object', [FilterResourceObject])\n  registerFilterRenderer('department-object', [FilterDepartmentObject])\n}\n"]}

package/dist-client/filters-form/filter-department-object.d.ts

@@ -0,0 +1,3 @@
+import './ox-filter-department-object.js';
+import { FilterSelectRenderer } from '@operato/data-grist';
+export declare const FilterDepartmentObject: FilterSelectRenderer;

package/dist-client/filters-form/filter-department-object.js

@@ -0,0 +1,8 @@
+import './ox-filter-department-object.js';
+import { html } from 'lit-html';
+export const FilterDepartmentObject = (column, value, owner) => {
+    return html `
+    <ox-filter-department-object name=${column === null || column === void 0 ? void 0 : column.name} .column=${column} .value=${value}></ox-filter-department-object>
+  `;
+};
+//# sourceMappingURL=filter-department-object.js.map

package/dist-client/filters-form/filter-department-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-department-object.js","sourceRoot":"","sources":["../../client/filters-form/filter-department-object.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,sBAAsB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACnF,OAAO,IAAI,CAAA;wCAC2B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,YAAY,MAAM,WAAW,KAAK;GACnF,CAAA;AACH,CAAC,CAAA","sourcesContent":["import './ox-filter-department-object.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '@operato/data-grist'\n\nexport const FilterDepartmentObject: FilterSelectRenderer = (column, value, owner) => {\n  return html`\n    <ox-filter-department-object name=${column?.name} .column=${column} .value=${value}></ox-filter-department-object>\n  `\n}\n"]}

package/dist-client/filters-form/ox-filter-department-object.d.ts

@@ -0,0 +1,15 @@
+import '../component/department-selector.js';
+import { TemplateResult } from 'lit';
+import { OxFormField } from '@operato/input';
+export declare class OxFilterDepartmentObject extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    column: any;
+    value?: string;
+    department?: any;
+    private popup?;
+    private template?;
+    render(): TemplateResult<1>;
+    _onclick(e: Event): void;
+    _onkeydown(e: KeyboardEvent): void;
+    openSelector(): void;
+}

package/dist-client/filters-form/ox-filter-department-object.js

@@ -0,0 +1,130 @@
+import { __decorate, __metadata } from "tslib";
+import '../component/department-selector.js';
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+import { OxFormField } from '@operato/input';
+let OxFilterDepartmentObject = class OxFilterDepartmentObject extends OxFormField {
+    render() {
+        var { name, description } = this.department || (this.value ? { name: this.value } : {});
+        return html `
+      <div @click=${this._onclick} @keydown=${this._onkeydown}>
+        <span tabindex="0" style="flex:1">${name || ''}${(description && `(${description})`) || ''}</span>
+        <md-icon>search</md-icon>
+      </div>
+    `;
+    }
+    _onclick(e) {
+        e.stopPropagation();
+        this.openSelector();
+    }
+    _onkeydown(e) {
+        const key = e.key;
+        if (key == 'Enter') {
+            e.stopPropagation();
+            this.openSelector();
+        }
+    }
+    openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        const confirmCallback = (selected) => {
+            var _a;
+            this.department = selected
+                ? {
+                    id: selected.id,
+                    controlNo: selected.controlNo,
+                    name: selected.name,
+                    description: selected.description
+                }
+                : null;
+            this.value = (_a = this.department) === null || _a === void 0 ? void 0 : _a.name;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        };
+        var template = this.template ||
+            html `
+        <department-selector
+          .value=${this.department || {}}
+          .confirmCallback=${confirmCallback.bind(this)}
+        ></department-selector>
+      `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.select_item')
+        });
+    }
+};
+OxFilterDepartmentObject.styles = [
+    css `
+      :host {
+        display: block;
+        position: relative;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+        min-width: 100px;
+
+        --ox-select-padding: var(--spacing-tiny);
+        --ox-select-font: var(--input-font);
+        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
+      }
+
+      div {
+        width: 100%;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: var(--ox-select-padding);
+        font: var(--ox-select-font);
+        color: var(--ox-select-color);
+      }
+
+      span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        gap: 4px;
+      }
+
+      md-icon {
+        --md-icon-size: 16px;
+        display: block;
+        text-align: right;
+        color: var(--ox-select-icon-color);
+        opacity: 0.7;
+      }
+
+      div:hover md-icon {
+        color: var(--md-sys-color-on-primary-container);
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], OxFilterDepartmentObject.prototype, "column", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxFilterDepartmentObject.prototype, "value", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxFilterDepartmentObject.prototype, "department", void 0);
+OxFilterDepartmentObject = __decorate([
+    customElement('ox-filter-department-object')
+], OxFilterDepartmentObject);
+export { OxFilterDepartmentObject };
+//# sourceMappingURL=ox-filter-department-object.js.map

package/dist-client/filters-form/ox-filter-department-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-filter-department-object.js","sourceRoot":"","sources":["../../client/filters-form/ox-filter-department-object.ts"],"names":[],"mappings":"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","sourcesContent":["import '../component/department-selector.js'\n\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup, PopupHandle } from '@operato/layout'\nimport { OxFormField } from '@operato/input'\n\n@customElement('ox-filter-department-object')\nexport class OxFilterDepartmentObject extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n        min-width: 100px;\n\n        --ox-select-padding: var(--spacing-tiny);\n        --ox-select-font: var(--input-font);\n        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);\n      }\n\n      div {\n        width: 100%;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: var(--ox-select-padding);\n        font: var(--ox-select-font);\n        color: var(--ox-select-color);\n      }\n\n      span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        gap: 4px;\n      }\n\n      md-icon {\n        --md-icon-size: 16px;\n        display: block;\n        text-align: right;\n        color: var(--ox-select-icon-color);\n        opacity: 0.7;\n      }\n\n      div:hover md-icon {\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: Object }) column: any\n  @property({ type: String }) value?: string\n\n  @state() department?: any\n\n  private popup?: PopupHandle\n  private template?: TemplateResult\n\n  render() {\n    var { name, description } = this.department || (this.value ? { name: this.value } : {})\n\n    return html`\n      <div @click=${this._onclick} @keydown=${this._onkeydown}>\n        <span tabindex=\"0\" style=\"flex:1\">${name || ''}${(description && `(${description})`) || ''}</span>\n        <md-icon>search</md-icon>\n      </div>\n    `\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n    this.openSelector()\n  }\n\n  _onkeydown(e: KeyboardEvent): void {\n    const key = e.key\n    if (key == 'Enter') {\n      e.stopPropagation()\n      this.openSelector()\n    }\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const confirmCallback = (selected?: { [field: string]: any }) => {\n      this.department = selected\n        ? {\n            id: selected.id,\n            controlNo: selected.controlNo,\n            name: selected.name,\n            description: selected.description\n          }\n        : null\n\n      this.value = this.department?.name\n\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n\n    var template =\n      this.template ||\n      html`\n        <department-selector\n          .value=${this.department || {}}\n          .confirmCallback=${confirmCallback.bind(this)}\n        ></department-selector>\n      `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select_item')\n    })\n  }\n}\n"]}