@operato/process 2.0.0-alpha.9 → 2.0.0-alpha.90

package/CHANGELOG.md

@@ -3,6 +3,560 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.90](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.89...v2.0.0-alpha.90) (2024-04-18)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.89](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.88...v2.0.0-alpha.89) (2024-04-18)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.88](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.87...v2.0.0-alpha.88) (2024-04-18)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.87](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.86](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.85...v2.0.0-alpha.86) (2024-04-16)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.85](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
+
+
+### :bug: Bug Fix
+
+* tweak filters-form style ([6fb293d](https://github.com/heartyoh/ioperato/commit/6fb293d7d34ea7b01b3011264f554158beb62621))
+
+
+
+## [2.0.0-alpha.82](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.81...v2.0.0-alpha.82) (2024-04-15)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.81](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.80...v2.0.0-alpha.81) (2024-04-15)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.80](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.79](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.78...v2.0.0-alpha.79) (2024-04-14)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.78](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.77...v2.0.0-alpha.78) (2024-04-14)
+
+
+### :bug: Bug Fix
+
+* revert  @open-wc/scoped-elements to ^2.1.3 ([dfdfc57](https://github.com/heartyoh/ioperato/commit/dfdfc5738a54a492c580178e944b51e0b42dc512))
+
+
+
+## [2.0.0-alpha.77](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.76...v2.0.0-alpha.77) (2024-04-14)
+
+
+### :bug: Bug Fix
+
+* add @webcomponents/scoped-custom-element-registry for storybook ([1f4264b](https://github.com/heartyoh/ioperato/commit/1f4264bd8384d8256437dfc838d22d64ec9a452d))
+
+
+
+## [2.0.0-alpha.76](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.75...v2.0.0-alpha.76) (2024-04-14)
+
+
+### :bug: Bug Fix
+
+* fix: apply @open-wc/scoped-elements@3 ([929d74a](https://github.com/heartyoh/ioperato/commit/929d74a8febdb77379b4ecbf9e5721bbf40a2063))
+
+
+
+## [2.0.0-alpha.75](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.74...v2.0.0-alpha.75) (2024-04-14)
+
+
+### :bug: Bug Fix
+
+* apply @open-wc/scoped-elements@3 ([ff1c9b4](https://github.com/heartyoh/ioperato/commit/ff1c9b4de393e955e2cacbf8f0c6ea307df7c76e))
+
+
+
+## [2.0.0-alpha.74](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.73...v2.0.0-alpha.74) (2024-04-14)
+
+
+### :bug: Bug Fix
+
+* apply @open-wc/scoped-elements@3 ([b15def6](https://github.com/heartyoh/ioperato/commit/b15def6d50fefc1bfb940022a0019f36cf74335a))
+
+
+
+## [2.0.0-alpha.73](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.72...v2.0.0-alpha.73) (2024-04-14)
+
+
+### :bug: Bug Fix
+
+* remove whole mwc-components ([c1a4f3e](https://github.com/heartyoh/ioperato/commit/c1a4f3e269f591919bf91e6afdb8bbc208e59c49))
+
+
+
+## [2.0.0-alpha.71](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.70...v2.0.0-alpha.71) (2024-04-13)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.70](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.69...v2.0.0-alpha.70) (2024-04-13)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.69](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.68...v2.0.0-alpha.69) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([972f5fd](https://github.com/heartyoh/ioperato/commit/972f5fd8da02820b6d6238cf1dd099591f97d8df))
+
+
+
+## [2.0.0-alpha.68](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([2bc13f2](https://github.com/heartyoh/ioperato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
+
+
+
+## [2.0.0-alpha.64](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.63](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.62...v2.0.0-alpha.63) (2024-04-12)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.62](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.61](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.60...v2.0.0-alpha.61) (2024-04-11)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.60](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.59...v2.0.0-alpha.60) (2024-04-11)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.59](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.58...v2.0.0-alpha.59) (2024-04-11)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.58](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.57...v2.0.0-alpha.58) (2024-04-07)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.57](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.54](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.53...v2.0.0-alpha.54) (2024-04-01)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.52](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.51...v2.0.0-alpha.52) (2024-03-29)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.51](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
+
+
+### :bug: Bug Fix
+
+* upgrade lit ([e661c33](https://github.com/heartyoh/ioperato/commit/e661c333d2bb97f784b5ac2c0e365714ee5e80ff))
+
+
+
+## [2.0.0-alpha.50](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.49...v2.0.0-alpha.50) (2024-03-28)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.49](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.48...v2.0.0-alpha.49) (2024-03-28)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.48](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.47...v2.0.0-alpha.48) (2024-03-28)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.47](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.46](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.45...v2.0.0-alpha.46) (2024-03-26)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.45](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.44...v2.0.0-alpha.45) (2024-03-26)
+
+
+### :bug: Bug Fix
+
+* board modeller style ([53445fc](https://github.com/heartyoh/ioperato/commit/53445fca78ba87f81549da395b25911f0341e323))
+
+
+
+## [2.0.0-alpha.44](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.43...v2.0.0-alpha.44) (2024-03-24)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.43](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.42...v2.0.0-alpha.43) (2024-03-24)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.42](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.41...v2.0.0-alpha.42) (2024-03-21)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.41](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.40...v2.0.0-alpha.41) (2024-03-20)
+
+
+### :bug: Bug Fix
+
+* scene component label ([b8e56cf](https://github.com/heartyoh/ioperato/commit/b8e56cf2eb42f0767ed5d2a5f153b1fbbe7cabe5))
+
+
+
+## [2.0.0-alpha.40](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.39...v2.0.0-alpha.40) (2024-03-20)
+
+
+### :bug: Bug Fix
+
+* scene component label ([f55c4a8](https://github.com/heartyoh/ioperato/commit/f55c4a8eb377974da0685c48afb668051bdcb04c))
+
+
+
+## [2.0.0-alpha.39](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.38...v2.0.0-alpha.39) (2024-03-20)
+
+
+### :bug: Bug Fix
+
+* scene component label ([b5058fa](https://github.com/heartyoh/ioperato/commit/b5058fa526a791d2be8f982f1c1d8208440c0f38))
+
+
+
+## [2.0.0-alpha.38](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.37...v2.0.0-alpha.38) (2024-03-19)
+
+
+### :bug: Bug Fix
+
+* add display attribute for process equipment template ([d0d3c41](https://github.com/heartyoh/ioperato/commit/d0d3c41c2c378daabd68f8fb70bb7f8acc2fdc0a))
+
+
+
+## [2.0.0-alpha.37](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.36...v2.0.0-alpha.37) (2024-03-18)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.35](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.34](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.33...v2.0.0-alpha.34) (2024-03-12)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.32](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.31...v2.0.0-alpha.32) (2024-03-12)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.31](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.30...v2.0.0-alpha.31) (2024-03-03)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.30](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.29...v2.0.0-alpha.30) (2024-03-03)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.29](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.28...v2.0.0-alpha.29) (2024-02-22)
+
+
+### :rocket: New Features
+
+* 말줄임 텍스트 UI 수정 ([29fce15](https://github.com/heartyoh/ioperato/commit/29fce1511cf13c3bb19ff28c3d334846da0a7dbb))
+* 보드 프로퍼티 UI에 textOverflow 추가 ([b9639a7](https://github.com/heartyoh/ioperato/commit/b9639a7f34cec066e37660f28068f9a6d125277b))
+
+
+
+## [2.0.0-alpha.28](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
+
+
+### :bug: Bug Fix
+
+* upgrade devDependencies for webcomponents ([1489b8b](https://github.com/heartyoh/ioperato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
+
+
+
+## [2.0.0-alpha.27](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.26...v2.0.0-alpha.27) (2024-02-17)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.25](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.24...v2.0.0-alpha.25) (2024-02-12)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.24](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.23...v2.0.0-alpha.24) (2024-02-11)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.23](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.22...v2.0.0-alpha.23) (2024-02-10)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.22](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.21...v2.0.0-alpha.22) (2024-02-10)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.21](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.20...v2.0.0-alpha.21) (2024-02-09)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.20](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.19...v2.0.0-alpha.20) (2024-02-05)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.19](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.18...v2.0.0-alpha.19) (2024-02-05)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.17](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.16...v2.0.0-alpha.17) (2024-02-04)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.16](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.15...v2.0.0-alpha.16) (2024-02-03)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.13](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2024-01-28)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.12](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.11...v2.0.0-alpha.12) (2024-01-24)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.11](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2024-01-24)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+## [2.0.0-alpha.10](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.9...v2.0.0-alpha.10) (2024-01-22)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
 ## [2.0.0-alpha.9](https://github.com/heartyoh/ioperato/compare/v2.0.0-alpha.8...v2.0.0-alpha.9) (2024-01-20)
 
 **Note:** Version bump only for package @operato/process

package/demo/index-modeller.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -21,7 +21,18 @@
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="demo"></div>

package/demo/index-viewer.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -21,7 +21,18 @@
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="demo"></div>

package/demo/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -21,7 +21,18 @@
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="demo"></div>

package/dist/src/modeller/component-toolbar/component-detail.d.ts

@@ -8,5 +8,5 @@ export declare class ComponentDetail extends LitElement {
     template: {
         about: string;
     } | null;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/modeller/component-toolbar/component-menu.d.ts

@@ -14,7 +14,7 @@ export declare class ComponentMenu extends ComponentMenu_base {
     static get scopedElements(): {
         'process-component-detail': typeof ComponentDetail;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): void;
     findTemplate(type: string | null | undefined): void;
     onHoverComponent(e: MouseEvent): void;

package/dist/src/modeller/component-toolbar/component-menu.js

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
 import { ComponentDetail } from './component-detail';
 const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href;
 export class ComponentMenu extends ScopedElementsMixin(LitElement) {
@@ -24,11 +25,14 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
           <h2 @click=${(e) => e.stopPropagation()}>${this.group} list</h2>
 
           <div templates @mouseover=${(e) => this.onHoverComponent(e)}>
-            ${(this.templates || []).map(template => html `
-                <div @click=${this.onClickTemplate} data-type=${template.type} template>
-                  <img src=${String(this.templateIcon(template))} />${template.type}
+            ${(this.templates || []).map(template => {
+                const { type } = template;
+                return html `
+                <div @click=${this.onClickTemplate} data-type=${type} template>
+                  <img src=${String(this.templateIcon(template))} />${i18next.t(`component.${type}`)}
                 </div>
-              `)}
+              `;
+            })}
           </div>
 
           <process-component-detail
@@ -140,6 +144,7 @@ ComponentMenu.styles = [
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         font-size: 11px;
         color: var(--component-menu-item-color);
+        text-transform: capitalize;
       }
 
       [template]:hover,