@dev-tcloud/tcloud-ui 0.0.19 → 0.0.21

package/fesm2020/dev-tcloud-tcloud-ui.mjs

@@ -1099,7 +1099,6 @@ class DataListService {
         this._stateSourceOptions.next(v);
     }
     setActiveItem(v) {
-        // console.log('setActiveItem', v);
         this._stateSourceActive.next(v);
     }
     getActiveItem() {
@@ -1188,6 +1187,22 @@ class TCloudUiDataListComponent {
         this.toResize();
         this.toClick();
     }
+    ngAfterViewChecked() {
+        if (this.list_selected_options && (this.list_selected_options).length > 0) {
+            for (let i = 0; i < (this.list_selected_options).length; i++) {
+                const item = this.list_selected_options[i];
+                if (item.value === this.selected_item) {
+                    setTimeout(() => {
+                        if (this.selected_description !== item.description) {
+                            this.selected_description = item.description;
+                            this.dataListService.setActiveItem(this.selected_item);
+                        }
+                    });
+                    break;
+                }
+            }
+        }
+    }
     generateID() {
         return `data-list-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
     }
@@ -1369,9 +1384,12 @@ class TCloudUiDataListOptionComponent {
         this.id = '';
         this.select_options = new ISelectOptions();
         this.selected = new EventEmitter();
-        this.subscription_active = dataListService.stateValue$.subscribe(v => { this.actived_value = v; });
     }
     ngOnInit() {
+        this.actived_value = this.dataListService.getActiveItem();
+        this.subscription_active = this.dataListService.stateActive$.subscribe(v => {
+            this.actived_value = v;
+        });
         this.id = this.generateID();
         this.setSelectOptions();
     }
@@ -1405,10 +1423,10 @@ class TCloudUiDataListOptionComponent {
     }
 }
 TCloudUiDataListOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiDataListOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: { value: "value" }, outputs: { selected: "selected" }, ngImport: i0, template: "<button \r\n  [title]=\"select_options.description\"\r\n  id=\"{{id}}\"\r\n  [attr.data-description]=\"select_options.description\"\r\n  class=\"dropdown-item\" \r\n  [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n  [class.active]=\"value === actived_value\" \r\n  type=\"button\" \r\n  [value]=\"value\"\r\n  (click)=\"setSelectedItem(value)\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] });
+TCloudUiDataListOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: { value: "value" }, outputs: { selected: "selected" }, ngImport: i0, template: "<button \r\n  [title]=\"select_options.description\"\r\n  id=\"{{id}}\"\r\n  [attr.data-description]=\"select_options.description\"\r\n  [attr.data-actived-value]=\"actived_value\"\r\n  class=\"dropdown-item\" \r\n  [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n  [class.active]=\"value === actived_value\" \r\n  type=\"button\" \r\n  [value]=\"value\"\r\n  (click)=\"setSelectedItem(value)\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-data-list-option', template: "<button \r\n  [title]=\"select_options.description\"\r\n  id=\"{{id}}\"\r\n  [attr.data-description]=\"select_options.description\"\r\n  class=\"dropdown-item\" \r\n  [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n  [class.active]=\"value === actived_value\" \r\n  type=\"button\" \r\n  [value]=\"value\"\r\n  (click)=\"setSelectedItem(value)\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] }]
+            args: [{ selector: 'tcloud-ui-data-list-option', template: "<button \r\n  [title]=\"select_options.description\"\r\n  id=\"{{id}}\"\r\n  [attr.data-description]=\"select_options.description\"\r\n  [attr.data-actived-value]=\"actived_value\"\r\n  class=\"dropdown-item\" \r\n  [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n  [class.active]=\"value === actived_value\" \r\n  type=\"button\" \r\n  [value]=\"value\"\r\n  (click)=\"setSelectedItem(value)\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}\n"] }]
         }], ctorParameters: function () { return [{ type: DataListService }]; }, propDecorators: { value: [{
                 type: Input
             }], selected: [{