add: getText compatibility.

add: `AssetSelector` and `TemplateSelector`.
add: `popup-selector` style class.
add: `ui.resolvePopup` function.
add: `switch` in checkbox.
add: `GridColumn.filterTemplate` supports.
add: add `action` callback in `createIcon`.
change: replace `setTimeout(..., 0)` with `requestAnimationFrame`.
change: Popup result structure adjustment ({ result: any, popup: Popup }).
change: complete add work order flow.
change: reduce Popup title height.
fix: Grid column sort in number.

lib/element/style.scss

@@ -1,3 +1,5 @@
+@import "../ui/css/functions/func.scss";
+
 .schedule-item-container {
 
     fieldset {
@@ -96,6 +98,25 @@
     }
 }
 
+.open-wo-container,
+.popup-selector {
+
+    .ui-icon {
+        width: 14px;
+        height: 14px;
+        fill: rgb(123, 28, 33);
+        cursor: pointer;
+        transition: opacity .12s ease;
+
+        &:focus,
+        &:active,
+        &:hover {
+            outline: none;
+            opacity: .4;
+        }
+    }
+}
+
 .open-wo-container {
     display: flex;
     flex-direction: column;
@@ -115,28 +136,182 @@
     >.open-wo-content {
         flex: 1 1 auto;
         margin: 10px;
+        display: grid;
+        grid-template-columns: minmax(130px,auto) 1fr;
+        grid-auto-rows: minmax(32px, auto);
+        align-items: center;
+        justify-items: start;
 
         >.wo-line {
+            grid-column: 1 / 3;
+        }
+
+        .wo-combined {
             line-height: var(--settings-line-height);
+            display: flex;
+            align-items: center;
 
-            &.wo-sub-line {
-                margin-left: 10px;
+            >.ui-icon {
+                margin-left: 4px;
             }
+        }
 
-            >.wo-title {
-                &.wo-title-required {
-                    &::after {
-                        content: '*';
-                        color: var(--red-color);
-                    }
+        .wo-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &.wo-title-required {
+                &::after {
+                    content: '*';
+                    color: var(--red-color);
                 }
             }
 
-            >.ui-text {
-                width: 100%;
-                height: 80px;
-                box-sizing: border-box;
+        }
+
+        .wo-sub-line {
+            margin-left: 10px;
+        }
+
+        .wo-asset-name,
+        .wo-company-name {
+            margin-left: 6px;
+            max-width: 400px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .ui-input,
+        .ui-date-cell,
+        .ui-drop-wrapper {
+            margin-left: 4px;
+        }
+
+        .ui-input {
+            height: 28px;
+            line-height: 28px;
+            box-sizing: border-box;
+        }
+
+        .ui-input,
+        .ui-drop-wrapper {
+            min-width: 180px;
+            max-width: 300px;
+        }
+
+        .input-odometer+.ui-drop-wrapper {
+            min-width: 50px;
+        }
+
+        .ui-date-cell {
+            height: 26px;
+            padding: 0 4px;
+
+            @include outborder();
+
+            &:invalid {
+                color: rgba(0, 0, 0, .3);
+            }
+        }
+
+        .ui-text {
+            width: 100%;
+            height: 80px;
+            box-sizing: border-box;
+        }
+
+        .wo-color-line {
+            display: flex;
+            align-items: center;
+
+            >em {
+                flex: 0 0 auto;
+                width: 14px;
+                height: 14px;
+                border-radius: 7px;
+            }
+
+            >label {
+                flex: 1 1 auto;
+                padding-left: 8px;
+                cursor: pointer;
             }
         }
     }
+}
+
+.popup-selector {
+    display: flex;
+    flex-direction: column;
+
+    >.popup-selector-header {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: flex-start;
+
+        >img {
+            width: 100px;
+        }
+
+        >h3 {
+            font-size: var(--font-header-size);
+            font-family: var(--header-font-family);
+            margin: 10px;
+            flex: 1 1 auto;
+        }
+    }
+
+    >.popup-selector-function {
+        flex: 0 0 auto;
+        margin: 10px;
+        display: flex;
+        align-items: center;
+
+        >.search-box {
+            position: relative;
+
+            >span {
+                position: absolute;
+                display: flex;
+                right: 4px;
+                top: calc(50% - 7px);
+                cursor: pointer;
+            }
+        }
+
+        .ui-input {
+            width: 200px;
+            box-sizing: border-box;
+            height: 28px;
+        }
+
+        .ui-drop-wrapper {
+            margin: 0 8px 0 4px;
+            width: 180px;
+        }
+    }
+
+    >.popup-selector-content {
+        flex: 1 1 auto;
+        margin: 10px;
+    }
+}
+
+.wo-opened-workorder {
+    display: flex;
+    flex-direction: column;
+    width: 650px;
+
+    >header {
+        flex: 0 0 auto;
+        margin: 10px;
+    }
+
+    >.wo-grid-opened {
+        flex: 1 1 auto;
+        margin: 0 10px;
+        height: 400px;
+    }
 }