@sd-angular/core 1.1.56 → 1.1.59

package/grid-material/src/lib/components/desktop-cell-editor/desktop-cell-editor.component.d.ts

@@ -4,5 +4,5 @@ export declare class SdDesktopCellEditor {
     column: SdGridMaterialColumn;
     item: any;
     constructor();
-    onChange: () => void;
+    onChange: (selected: any) => void;
 }

package/grid-material/src/lib/models/grid-column.model.d.ts

@@ -30,7 +30,7 @@ interface SdGridMaterialColumnText<T = any> extends SdGridMaterialBaseColumn<T>
     badgeIcon?: (value: any, rowData: T) => string;
     badgeType?: 'circle' | 'icon';
     editor?: {
-        change?: (rowData: T) => void;
+        change?: (rowData: T, selected?: any) => void;
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
@@ -45,7 +45,7 @@ interface SdGridMaterialColumnNumber<T = any> extends SdGridMaterialBaseColumn<T
     badgeIcon?: (value: any, rowData: T) => string;
     badgeType?: 'circle' | 'icon';
     editor?: {
-        change?: (rowData: T) => void;
+        change?: (rowData: T, selected?: any) => void;
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
@@ -63,7 +63,7 @@ interface SdGridMaterialBool<T = any> extends SdGridMaterialBaseColumn<T> {
     };
     badgeType?: 'circle';
     editor?: {
-        change?: (rowData: T) => void;
+        change?: (rowData: T, selected?: any) => void;
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
@@ -77,7 +77,7 @@ interface SdGridMaterialColumnDate<T = any> extends SdGridMaterialBaseColumn<T>
     };
     transformDate?: (value: any, rowData: T) => string | Date;
     editor?: {
-        change?: (rowData: T) => void;
+        change?: (rowData: T, selected?: any) => void;
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
@@ -95,7 +95,7 @@ interface SdGridMaterialColumnValues<T = any> extends SdGridMaterialBaseColumn<T
         selection?: 'AUTOCOMPLETE' | 'MULTIPLE' | 'MULTIPLEAUTOCOMPLETE';
     };
     editor?: {
-        change?: (rowData: T) => void;
+        change?: (rowData: T, selected?: any) => void;
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
@@ -108,7 +108,7 @@ interface SdGridMaterialColumnImage<T = any> extends SdGridMaterialBaseColumn<T>
         width: number;
     };
     editor?: {
-        change?: (rowData: T) => void;
+        change?: (rowData: T, selected?: any) => void;
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sd-angular/core",
-  "version": "1.1.56",
+  "version": "1.1.59",
   "homepage": "https://www.facebook.com/DarkP3ter",
   "author": {
     "name": "darkpeter",

package/select-editor/sd-angular-core-select-editor.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdSelectEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":20,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":21,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdSelectEditor"}],"exports":[{"__symbolic":"reference","name":"SdSelectEditor"}],"providers":[]}]}],"members":{}},"SdSelectEditor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sd-select-editor","template":"<div class=\"d-flex align-items-center\">\r\n  <div class=\"mat-label mr-12 mb-12\" *ngIf=\"leftLabel\" [ngStyle]=\"{'min-width': labelMinWidth}\">{{leftLabel}}</div>\r\n  <div class=\"media-body\">\r\n    <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm'}\" appearance=\"outline\">\r\n      <mat-label *ngIf=\"label && !leftLabel\">{{label}}</mat-label>\r\n      <mat-select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\"\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\" [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\"\r\n        [required]=\"isRequired\" disableOptionCentering=\"true\" #matSelect>\r\n        <mat-select-trigger>\r\n          {{display | async }}\r\n        </mat-select-trigger>\r\n        <ng-container *ngIf=\"valueField && displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item[displayField]\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{item[displayField]}}</span>\r\n              <div>\r\n                <mat-icon *ngIf=\"sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                  edit</mat-icon>\r\n                <mat-icon *ngIf=\"sdDelete?.observers?.length\" class=\"mr-0 c-fa-icon\" (click)=\"onDelete($event, item)\">\r\n                  delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!valueField && !displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{item}}</span>\r\n              <div>\r\n                <mat-icon *ngIf=\"sdEdit?.observers?.length\" class=\"mr-1 c-action-icon\" (click)=\"onEdit($event, item)\">\r\n                  edit</mat-icon>\r\n                <mat-icon *ngIf=\"sdDelete?.observers?.length\" class=\"mr-0 c-action-icon\"\r\n                  (click)=\"onDelete($event, item)\">delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option *ngIf=\"sdAdd?.observers?.length\" class=\"sd-option--add\">\r\n          <div (click)=\"onAdd($event)\">\r\n            <mat-icon class=\"mr-1\">add</mat-icon>\r\n            {{'New item' | sdTranslate}}\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"formControl.errors?.required\">\r\n        {{'This field is required' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator\">\r\n        {{formControl?.errors?.customValidator}}\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n</div>","styles":[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none}:host ::ng-deep .sd-selected .mat-select-arrow{border:none}.c-action-icon{color:#dadada;font-size:21px;height:20px;width:20px}.c-action-icon:hover{color:#616161}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field mat-select.mat-select-disabled .mat-select-value{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}:host ::ng-deep .sd-option--add{background-color:#fff;bottom:0;position:-webkit-sticky;position:sticky;z-index:1}"]}]}],"members":{"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":16,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelect","line":16,"character":13}]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"leftLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"labelMinWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"displayField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":97,"character":3}}]}],"sdSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":3}}]}],"sdAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":99,"character":3}}]}],"sdEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":100,"character":3}}]}],"sdDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":104,"character":17}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"SdSelectEditorModule":"./src/lib/select-editor.module","SdSelectEditor":"./src/lib/select-editor.component"},"importAs":"@sd-angular/core/select-editor"}
+{"__symbolic":"module","version":4,"metadata":{"SdSelectEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":24,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":27,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/select","name":"SdSelectModule","line":29,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdSelectEditor"}],"exports":[{"__symbolic":"reference","name":"SdSelectEditor"}],"providers":[]}]}],"members":{}},"SdSelectEditor":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sd-angular/core/select","name":"SdSelect","line":23,"character":36},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"sd-select-editor","template":"<label *ngIf=\"!appearance && label\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n  *ngIf=\"isRequired\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n[class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n<ng-container *ngIf=\"sdView?.templateRef && !isFocused; else default\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value, selectedItems: selectedItems | async }\">\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #default>\r\n  <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\"\r\n    [appearance]=\"appearance || 'outline'\">\r\n    <mat-label *ngIf=\"appearance && label\">{{label}}</mat-label>\r\n    <mat-select #select [formControl]=\"formControl\" [placeholder]=\"placeholder || (!appearance ? label : '')\" multiple\r\n      (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n      [ngClass]=\"{'sd-selected': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}\"\r\n      [required]=\"isRequired\" (openedChange)=\"onOpenChange($event)\" [attr.data-qclabel]=\"label\"\r\n      [attr.data-qcid]=\"qcId\" *ngIf=\"multiple\">\r\n      <mat-select-trigger>\r\n        {{display | async }}\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n          <mat-icon matPrefix>search</mat-icon>\r\n          <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n        </mat-form-field>\r\n      </mat-option>\r\n      <ng-container *ngIf=\"multiple && selectAll\">\r\n        <mat-checkbox class=\"mat-option\" [(ngModel)]=\"allSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n          (change)=\"onSelectAll()\">\r\n          Tất cả</mat-checkbox>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"valueField && displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item[valueField]\">\r\n          <div matTooltipPosition=\"above\" [matTooltip]=\"item[displayField]\" class=\"d-flex justify-content-between\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item[displayField] }}\r\n            </ng-container>\r\n            <div>\r\n              <mat-icon *ngIf=\"sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"sdDelete?.observers?.length\" class=\"mr-0 c-fa-icon\" (click)=\"onDelete($event, item)\">\r\n                delete</mat-icon>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!valueField && !displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item\">\r\n          <div matTooltipPosition=\"above\" [matTooltip]=\"item\" class=\"d-flex justify-content-between\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item }}\r\n            </ng-container>\r\n            <div>\r\n              <mat-icon *ngIf=\"sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"sdDelete?.observers?.length\" class=\"mr-0 c-fa-icon\" (click)=\"onDelete($event, item)\">\r\n                delete</mat-icon>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n      </ng-container>\r\n      <mat-option class=\"sd__option--add\" *ngIf=\"sdAdd?.observers?.length\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <div (click)=\"onAdd($event)\">\r\n          <mat-icon class=\"mr-1\">add</mat-icon>\r\n          {{'New item' | sdTranslate}}\r\n        </div>\r\n      </mat-option>\r\n    </mat-select>\r\n    <mat-select #select [formControl]=\"formControl\" [placeholder]=\"placeholder || (!appearance ? label : '')\"\r\n      (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n      [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\" [required]=\"isRequired\"\r\n      (openedChange)=\"onOpenChange($event)\" [attr.data-qclabel]=\"label\" [attr.data-qcid]=\"qcId\" *ngIf=\"!multiple\">\r\n      <mat-select-trigger>\r\n        {{display | async }}\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n          <mat-icon matPrefix>search</mat-icon>\r\n          <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n        </mat-form-field>\r\n      </mat-option>\r\n      <ng-container *ngIf=\"valueField && displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item[valueField]\">\r\n          <div matTooltipPosition=\"above\" [matTooltip]=\"item[displayField]\" class=\"d-flex justify-content-between\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item[displayField] }}\r\n            </ng-container>\r\n            <div>\r\n              <mat-icon *ngIf=\"sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"sdDelete?.observers?.length\" class=\"mr-0 c-fa-icon\" (click)=\"onDelete($event, item)\">\r\n                delete</mat-icon>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!valueField && !displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async; trackBy: trackByKey\" [value]=\"item\">\r\n          <div matTooltipPosition=\"above\" [matTooltip]=\"item\" class=\"d-flex justify-content-between\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item }}\r\n            </ng-container>\r\n            <div>\r\n              <mat-icon *ngIf=\"sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"sdDelete?.observers?.length\" class=\"mr-0 c-fa-icon\" (click)=\"onDelete($event, item)\">\r\n                delete</mat-icon>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n      </ng-container>\r\n      <mat-option class=\"sd__option--add\" *ngIf=\"sdAdd?.observers?.length\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <div (click)=\"onAdd($event)\">\r\n          <mat-icon class=\"mr-1\">add</mat-icon>\r\n          {{'New item' | sdTranslate}}\r\n        </div>\r\n      </mat-option>\r\n    </mat-select>\r\n    <mat-icon\r\n      *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled\"\r\n      class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel\r\n    </mat-icon>\r\n    <mat-error *ngIf=\"formControl.errors?.required && !disableErrorMessage\">\r\n      {{'This field is required' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n      {{formControl?.errors?.customValidator}}\r\n    </mat-error>\r\n  </mat-form-field>\r\n</ng-template>\r\n</div>","styles":[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none}:host ::ng-deep .sd-selected .mat-select-arrow{border:none}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field mat-select.mat-select-disabled .mat-select-value{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline{width:100%}::ng-deep .sd-select-panel .mat-option.sd-filtered-input mat-pseudo-checkbox{display:none}::ng-deep .mat-select-panel .mat-option.sd-filtered-input{height:auto}::ng-deep .sd-select-panel .mat-option.sd-filtered-input input{color:#000}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field-prefix .mat-icon{margin-right:0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding:10px 0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-outline{background-color:rgba(0,0,0,.04)}.sd__option--add{background-color:#fff;bottom:0;color:rgba(0,0,0,.87);cursor:pointer;position:-webkit-sticky;position:sticky;z-index:10}"]}]}],"members":{"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelect","line":24,"character":13}]}]}],"sdAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"sdEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"sdDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":32,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":33,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":31,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":34,"character":31}]}]}}},"origins":{"SdSelectEditorModule":"./src/lib/select-editor.module","SdSelectEditor":"./src/lib/select-editor.component"},"importAs":"@sd-angular/core/select-editor"}

package/select-editor/src/lib/select-editor.component.d.ts

@@ -1,46 +1,15 @@
-import { EventEmitter, ChangeDetectorRef, AfterViewInit, OnDestroy, OnInit } from '@angular/core';
-import { NgForm, FormGroup } from '@angular/forms';
-import { MatSelectChange, MatSelect } from '@angular/material/select';
-import { Observable } from 'rxjs';
-import { SdFormControl } from '@sd-angular/core/common';
-export declare class SdSelectEditor implements OnInit, AfterViewInit, OnDestroy {
-    #private;
-    private ref;
-    formControl: SdFormControl;
+import { EventEmitter, ChangeDetectorRef, OnDestroy, OnInit } from "@angular/core";
+import { MatSelect } from "@angular/material/select";
+import { IFormConfiguration } from "@sd-angular/core/common";
+import { SdSelect } from "@sd-angular/core/select";
+export declare class SdSelectEditor extends SdSelect implements OnInit, OnDestroy {
+    private cdRef;
+    private formConfiguration;
     matSelect: MatSelect;
-    get isNumber(): boolean;
-    size: 'sm' | 'lg';
-    set form(val: NgForm | FormGroup);
-    label: string;
-    placeholder: string;
-    leftLabel: string;
-    labelMinWidth: string;
-    set model(value: undefined | number | string);
-    set items(items: undefined | any[]);
-    valueField: string;
-    displayField: string;
-    isRequired: boolean;
-    set required(val: boolean | '');
-    set validator(validator: (value: any) => string | Promise<string>);
-    set disabled(val: boolean | '');
-    filteredItems: Observable<any[]>;
-    display: Observable<string>;
-    modelChange: EventEmitter<any>;
-    sdChange: EventEmitter<any>;
-    sdSelection: EventEmitter<{
-        value: any;
-        item?: any;
-    }>;
     sdAdd: EventEmitter<any>;
     sdEdit: EventEmitter<any>;
     sdDelete: EventEmitter<any>;
-    constructor(ref: ChangeDetectorRef);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    onSelectionChange: (change: MatSelectChange) => void;
-    reValidate: () => void;
-    clear: ($event?: Event) => void;
+    constructor(cdRef: ChangeDetectorRef, formConfiguration: IFormConfiguration);
     onAdd: ($event: Event) => void;
     onEdit: ($event: Event, item: any) => void;
     onDelete: ($event: Event, item: any) => void;