@sd-angular/core 0.0.976 → 0.0.980

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

@@ -31,8 +31,9 @@ interface SdGridMaterialColumnText<T = any> extends SdGridMaterialBaseColumn<T>
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
-        defaultValue?: string;
-        relatedColumns?: string[];
+        minLength?: number;
+        maxLength?: number;
+        validator?: (rowData: T) => string;
     };
 }
 interface SdGridMaterialColumnNumber<T = any> extends SdGridMaterialBaseColumn<T> {
@@ -44,8 +45,9 @@ interface SdGridMaterialColumnNumber<T = any> extends SdGridMaterialBaseColumn<T
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
-        defaultValue?: string;
-        relatedColumns?: string[];
+        minValue?: number;
+        maxValue?: number;
+        validator?: (rowData: T) => string;
     };
 }
 interface SdGridMaterialBool<T = any> extends SdGridMaterialBaseColumn<T> {
@@ -60,8 +62,6 @@ interface SdGridMaterialBool<T = any> extends SdGridMaterialBaseColumn<T> {
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
-        defaultValue?: boolean;
-        relatedColumns?: string[];
     };
 }
 interface SdGridMaterialColumnDate<T = any> extends SdGridMaterialBaseColumn<T> {
@@ -74,8 +74,6 @@ interface SdGridMaterialColumnDate<T = any> extends SdGridMaterialBaseColumn<T>
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
-        defaultValue?: string;
-        relatedColumns?: string[];
     };
 }
 interface SdGridMaterialColumnValues<T = any> extends SdGridMaterialBaseColumn<T> {
@@ -93,8 +91,6 @@ interface SdGridMaterialColumnValues<T = any> extends SdGridMaterialBaseColumn<T
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
-        defaultValue?: string | number | boolean;
-        relatedColumns?: string[];
     };
 }
 interface SdGridMaterialColumnImage<T = any> extends SdGridMaterialBaseColumn<T> {
@@ -108,7 +104,6 @@ interface SdGridMaterialColumnImage<T = any> extends SdGridMaterialBaseColumn<T>
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);
-        relatedColumns?: string[];
     };
 }
 declare type SdGridMaterialNormalColumn<T> = Exclude<Exclude<SdGridMaterialColumn<T>, SdGridMaterialColumnChildren<T>>, SdGridMaterialColumnChildrenCol<T>>;

package/grid-material/src/lib/pipes/editor-handler-column.pipe.d.ts

@@ -1,8 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import { SdGridMaterialColumn } from '../models/grid-column.model';
-import { SdGridMaterialOption } from '../models/grid-option.model';
 import { SdItem } from '../models/grid.model';
 export declare class SdEditorHandlerColumnPipe implements PipeTransform {
     #private;
-    transform(value: any, item: SdItem, column: SdGridMaterialColumn, gridOption: SdGridMaterialOption): boolean;
+    transform(id: string, item: SdItem, column: SdGridMaterialColumn): boolean;
 }

package/grid-material/src/lib/pipes/sd-id.pipe.d.ts

@@ -0,0 +1,5 @@
+import { PipeTransform } from '@angular/core';
+import { SdItem } from '../models/grid.model';
+export declare class SdIdPipe implements PipeTransform {
+    transform(value: any, item: SdItem): string;
+}

package/package.json

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

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdSelectModule":{"__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":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":26,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":27,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}],"exports":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}],"providers":[]}]}],"members":{}},"SdSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sd-select","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":13,"character":19},"member":"OnPush"},"template":"<div class=\"d-flex align-items-center\">\r\n  <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\"\r\n    appearance=\"outline\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || 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)\" *ngIf=\"multiple\">\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\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\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        </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          <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        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || 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)\" *ngIf=\"!multiple\">\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\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\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        </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          <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        </mat-option>\r\n      </ng-container>\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</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}::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)}"]}]}],"members":{"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":16,"character":3},"arguments":["input"]}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":17,"character":3},"arguments":["select"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3},"arguments":["disableErrorMessage"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"displayField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"_multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3},"arguments":["multiple"]}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":3}}]}],"_filtered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":3},"arguments":["filtered"]}]}],"selectDisplayDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":144,"character":3},"arguments":[{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}]}]}],"_selectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":3},"arguments":["selectAll"]}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":151,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":152,"character":3}}]}],"sdSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":153,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":155,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":156,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSelectAll":[{"__symbolic":"method"}]}},"SdSelectDisplayDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdSelectDisplayDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}},"origins":{"SdSelectModule":"./src/lib/select.module","SdSelect":"./src/lib/select.component","SdSelectDisplayDefDirective":"./src/lib/select-display-def.directive"},"importAs":"@sd-angular/core/select"}
+{"__symbolic":"module","version":4,"metadata":{"SdSelectModule":{"__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":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":26,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":27,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}],"exports":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}],"providers":[]}]}],"members":{}},"SdSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sd-select","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":13,"character":19},"member":"OnPush"},"template":"<div class=\"d-flex align-items-center\">\r\n  <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\"\r\n    appearance=\"outline\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || 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)\" *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\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\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        </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          <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        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || 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)\" *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\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\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        </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          <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        </mat-option>\r\n      </ng-container>\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</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}::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)}"]}]}],"members":{"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":16,"character":3},"arguments":["input"]}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":17,"character":3},"arguments":["select"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3},"arguments":["disableErrorMessage"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"displayField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"_multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3},"arguments":["multiple"]}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":3}}]}],"_filtered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":3},"arguments":["filtered"]}]}],"selectDisplayDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":145,"character":3},"arguments":[{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}]}]}],"_selectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":3},"arguments":["selectAll"]}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":152,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":153,"character":3}}]}],"sdSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":154,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":156,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":157,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSelectAll":[{"__symbolic":"method"}]}},"SdSelectDisplayDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdSelectDisplayDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}},"origins":{"SdSelectModule":"./src/lib/select.module","SdSelect":"./src/lib/select.component","SdSelectDisplayDefDirective":"./src/lib/select-display-def.directive"},"importAs":"@sd-angular/core/select"}

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

@@ -21,6 +21,7 @@ export declare class SdSelect implements OnInit, AfterViewInit, OnDestroy {
     set form(val: NgForm | FormGroup);
     label: string;
     placeholder: string;
+    display: Observable<string>;
     set model(value: undefined | boolean | number | string | (number | string)[]);
     set items(items: undefined | any[] | ((searchText?: string) => Promise<any[]>));
     valueField: string;