@sd-angular/core 1.1.98 → 1.2.2

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

@@ -5,4 +5,7 @@ export declare class SdDesktopCellEditor {
     item: any;
     constructor();
     onChange: (selected: any) => void;
+    editorOnAdd: () => void;
+    editorOnEdit: (option: any) => void;
+    editorOnDelete: (option: any) => void;
 }

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

@@ -83,7 +83,7 @@ interface SdGridMaterialColumnDate<T = any> extends SdGridMaterialBaseColumn<T>
         required?: boolean | ((rowData: T) => boolean);
     };
 }
-interface SdGridMaterialColumnValues<T = any> extends SdGridMaterialBaseColumn<T> {
+export interface SdGridMaterialColumnValues<T = any> extends SdGridMaterialBaseColumn<T> {
     type: 'values';
     badge?: (value: any, rowData: T) => SdBadgeColor;
     badgeIcon?: (value: any, rowData: T) => string;
@@ -92,10 +92,13 @@ interface SdGridMaterialColumnValues<T = any> extends SdGridMaterialBaseColumn<T
         items: any[] | ((searchText?: string | string[], isFormValue?: boolean) => Promise<any[]>);
         valueField: string;
         displayField: string;
-        selection?: 'AUTOCOMPLETE' | 'MULTIPLE' | 'MULTIPLEAUTOCOMPLETE';
+        selection?: 'AUTOCOMPLETE' | 'MULTIPLE' | 'MULTIPLEAUTOCOMPLETE' | 'AUTOCOMPLETE_EDITOR' | 'MULTIPLE_EDITOR' | 'MULTIPLEAUTOCOMPLETE_EDITOR';
     };
     editor?: {
         change?: (rowData: T, selected?: any) => void;
+        add?: () => void;
+        edit?: (item: any, rowData: T) => void;
+        delete?: (item: any, rowData: T) => void;
         hidden?: boolean | ((rowData: T) => boolean);
         disabled?: boolean | ((rowData: T) => boolean);
         required?: boolean | ((rowData: T) => boolean);

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":24,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":25,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":26,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":28,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdInput"},{"__symbolic":"reference","name":"SdInputTooltipPipe"},{"__symbolic":"reference","name":"SdInputSuffixDirective"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"SdInput"},{"__symbolic":"reference","name":"SdInputTooltipPipe"},{"__symbolic":"reference","name":"SdInputSuffixDirective"},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":40,"character":4}]}]}],"members":{}},"SdInputTooltipPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":1,"character":1},"arguments":[{"name":"sdInputTooltipPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"SdInputSuffixDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdInputSuffix]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"sd-input","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":33,"character":19},"member":"OnPush"},"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 *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"sd-md\"\r\n      [ngClass]=\"{'sd-form-tooltip':tooltip, '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      <input [id]=\"id\" [formControl]=\"formControl\" [type]=\"type\" #control matInput\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" [required]=\"isRequired\" [readonly]=\"isReadonly\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [step]=\"1\" [attr.data-qclabel]=\"label\" [attr.data-qcid]=\"qcId\" [sdPopoverTriggerFor]=\"error\"\r\n        [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\">\r\n      <button #btnCopy *ngIf=\"copyable\" matSuffix mat-flat-button aria-label=\"Clear\" class=\"btn-copy\"\r\n        (click)=\"copyText()\">\r\n        Copy\r\n      </button>\r\n      <span class=\"mr-1\" *ngIf=\"maxlength\" matSuffix>{{formControl.value?.length || 0}}/{{maxlength}}</span>\r\n      <ng-container *ngIf=\"sdInputSuffix?.templateRef\" matSuffix>\r\n        <ng-container *ngTemplateOutlet=\"sdInputSuffix.templateRef\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-icon *ngIf=\"!hideIcon && sdClickIcon?.observers?.length\" (click)=\"onClickIcon($event)\"\r\n        class=\"pointer sd-suffix-icon\" matSuffix>\r\n        {{icon}}\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"formControl.errors?.required\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\" formControl.errors?.maxlength\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{'Max length' | sdTranslate}} {{maxlength}}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.pattern\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{'Pattern error' | sdTranslate}}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.customValidator\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{formControl.errors?.customValidator}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div *ngIf=\"tooltip\" class=\"sd-tooltip\">\r\n      <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value | sdInputTooltipPipe:tooltip\" matSuffix\r\n        #sdTooltip=\"matTooltip\">info</mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.pattern\">\r\n    {{'Pattern error' | sdTranslate}}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.customValidator\">\r\n    {{formControl.errors?.customValidator}}\r\n  </span>\r\n</sd-popover>","styles":[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}: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 input.mat-input-element:disabled{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}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}.sd-md:hover .btn-copy{visibility:visible}.btn-copy{background:#e9e9e9!important;font-size:12px;line-height:26px!important;margin-bottom:3px;visibility:hidden}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"_label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3},"arguments":["label"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["disableErrorMessage"]}]}],"_blurOnEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["blurOnEnter"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"pMinlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3},"arguments":["minlength"]}]}],"pMaxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3},"arguments":["maxlength"]}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"_hideIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3},"arguments":["hideIcon"]}]}],"sdClickIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":3}}]}],"tooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":3}}]}],"sdFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":136,"character":3}}]}],"sdFocusForceBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":3}}]}],"keyupEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":140,"character":3},"arguments":["control"]}]}],"sdInputSuffix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":141,"character":3},"arguments":[{"__symbolic":"reference","name":"SdInputSuffixDirective"}]}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":144,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":144,"character":16}]}]}],"btnCopy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":146,"character":3},"arguments":["btnCopy",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":146,"character":32}}]}]}],"_copyable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":3},"arguments":["copyable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":153,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":153,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":153,"character":26}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":152,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":153,"character":57},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":154,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"copyText":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[touch]"}]}],"members":{"touch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}]}}},"origins":{"SdInputModule":"./src/lib/input.module","SdInputTooltipPipe":"./src/lib/input-tooltip.pipe","SdInputSuffixDirective":"./src/lib/directives/input-suffix.directive","SdInput":"./src/lib/input.component","ɵa":"./src/lib/directives/touch.directive"},"importAs":"@sd-angular/core/input"}
+{"__symbolic":"module","version":4,"metadata":{"SdInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":24,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":25,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":26,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":28,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdInput"},{"__symbolic":"reference","name":"SdInputTooltipPipe"},{"__symbolic":"reference","name":"SdInputSuffixDirective"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"SdInput"},{"__symbolic":"reference","name":"SdInputTooltipPipe"},{"__symbolic":"reference","name":"SdInputSuffixDirective"},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":40,"character":4}]}]}],"members":{}},"SdInputTooltipPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":1,"character":1},"arguments":[{"name":"sdInputTooltipPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"SdInputSuffixDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdInputSuffix]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"sd-input","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":33,"character":19},"member":"OnPush"},"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 *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"sd-md\"\r\n      [ngClass]=\"{'sd-form-tooltip':tooltip, '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      <input [id]=\"id\" [formControl]=\"formControl\" [type]=\"type\" #control matInput\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" [required]=\"isRequired\" [readonly]=\"isReadonly\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [step]=\"1\" [attr.data-qclabel]=\"label\" [attr.data-qcid]=\"qcId\" [sdPopoverTriggerFor]=\"null\"\r\n        [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\">\r\n      <button #btnCopy *ngIf=\"copyable\" matSuffix mat-flat-button aria-label=\"Clear\" class=\"btn-copy\"\r\n        (click)=\"copyText()\">\r\n        Copy\r\n      </button>\r\n      <span class=\"mr-1\" *ngIf=\"maxlength\" matSuffix>{{formControl.value?.length || 0}}/{{maxlength}}</span>\r\n      <ng-container *ngIf=\"sdInputSuffix?.templateRef\" matSuffix>\r\n        <ng-container *ngTemplateOutlet=\"sdInputSuffix.templateRef\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-icon *ngIf=\"!hideIcon && sdClickIcon?.observers?.length\" (click)=\"onClickIcon($event)\"\r\n        class=\"pointer sd-suffix-icon\" matSuffix>\r\n        {{icon}}\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"formControl.errors?.required\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\" formControl.errors?.maxlength\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{'Max length' | sdTranslate}} {{maxlength}}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.pattern\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{'Pattern error' | sdTranslate}}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.customValidator\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{formControl.errors?.customValidator}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div *ngIf=\"tooltip\" class=\"sd-tooltip\">\r\n      <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value | sdInputTooltipPipe:tooltip\" matSuffix\r\n        #sdTooltip=\"matTooltip\">info</mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<!-- <sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.pattern\">\r\n    {{'Pattern error' | sdTranslate}}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.customValidator\">\r\n    {{formControl.errors?.customValidator}}\r\n  </span>\r\n</sd-popover> -->","styles":[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}: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 input.mat-input-element:disabled{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}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}.sd-md:hover .btn-copy{visibility:visible}.btn-copy{background:#e9e9e9!important;font-size:12px;line-height:26px!important;margin-bottom:3px;visibility:hidden}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"_label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3},"arguments":["label"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["disableErrorMessage"]}]}],"_blurOnEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["blurOnEnter"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"pMinlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3},"arguments":["minlength"]}]}],"pMaxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3},"arguments":["maxlength"]}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"_hideIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3},"arguments":["hideIcon"]}]}],"sdClickIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":3}}]}],"tooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":3}}]}],"sdFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":136,"character":3}}]}],"sdFocusForceBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":3}}]}],"keyupEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":140,"character":3},"arguments":["control"]}]}],"sdInputSuffix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":141,"character":3},"arguments":[{"__symbolic":"reference","name":"SdInputSuffixDirective"}]}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":144,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":144,"character":16}]}]}],"btnCopy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":146,"character":3},"arguments":["btnCopy",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":146,"character":32}}]}]}],"_copyable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":3},"arguments":["copyable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":153,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":153,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":153,"character":26}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":152,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":153,"character":57},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":154,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"copyText":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[touch]"}]}],"members":{"touch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"ref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}]}}},"origins":{"SdInputModule":"./src/lib/input.module","SdInputTooltipPipe":"./src/lib/input-tooltip.pipe","SdInputSuffixDirective":"./src/lib/directives/input-suffix.directive","SdInput":"./src/lib/input.component","ɵa":"./src/lib/directives/touch.directive"},"importAs":"@sd-angular/core/input"}

package/input-number/sd-angular-core-input-number.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdInputNumberModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SdInputNumber"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":22,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":23,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":24,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":26,"character":4}],"exports":[{"__symbolic":"reference","name":"SdInputNumber"}]}]}],"members":{}},"SdInputNumber":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"sd-input-number","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":40,"character":19},"member":"OnPush"},"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 *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\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      <input [id]=\"id\" [formControl]=\"inputControl\" #control matInput\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [errorStateMatcher]=\"matcher\"\r\n        (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keydown)=\"onKeydown($event)\"\r\n        [required]=\"isRequired\" [readonly]=\"isReadonly\" [autocomplete]=\"id\" (paste)=\"onPaste($event)\" autocorrect=\"off\"\r\n        [sdPopoverTriggerFor]=\"error\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\">\r\n      <ng-container *ngIf=\"sdSuffix?.templateRef\" matSuffix>\r\n        <ng-container *ngTemplateOutlet=\"sdSuffix.templateRef\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-error *ngIf=\"formControl?.errors?.required\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.customValidator\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{formControl.errors?.customValidator}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n<sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.customValidator\">\r\n    {{formControl.errors?.customValidator}}\r\n  </span>\r\n</sd-popover>","styles":[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}: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 input.mat-input-element:disabled{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}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}.sd-md:hover .btn-copy{visibility:visible}.btn-copy{background:#e9e9e9!important;font-size:12px;line-height:26px!important;margin-bottom:3px;visibility:hidden}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3},"arguments":["disableErrorMessage"]}]}],"_blurOnEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3},"arguments":["blurOnEnter"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":86,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"precision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":3}}]}],"sdFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":132,"character":3}}]}],"sdFocusForceBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":3}}]}],"keyupEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":134,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":136,"character":3},"arguments":["control"]}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":142,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":142,"character":16}]}]}],"sdSuffix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":143,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdSuffixDirective","line":143,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":147,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":147,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":147,"character":26}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":146,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":147,"character":57},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":148,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onPaste":[{"__symbolic":"method"}]}}},"origins":{"SdInputNumberModule":"./src/lib/input-number.module","SdInputNumber":"./src/lib/input-number.component"},"importAs":"@sd-angular/core/input-number"}
+{"__symbolic":"module","version":4,"metadata":{"SdInputNumberModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SdInputNumber"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":22,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":23,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":24,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":26,"character":4}],"exports":[{"__symbolic":"reference","name":"SdInputNumber"}]}]}],"members":{}},"SdInputNumber":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"sd-input-number","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":40,"character":19},"member":"OnPush"},"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 *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\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      <input [id]=\"id\" [formControl]=\"inputControl\" #control matInput\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [errorStateMatcher]=\"matcher\"\r\n        (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keydown)=\"onKeydown($event)\"\r\n        [required]=\"isRequired\" [readonly]=\"isReadonly\" [autocomplete]=\"id\" (paste)=\"onPaste($event)\" autocorrect=\"off\"\r\n        [sdPopoverTriggerFor]=\"null\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\">\r\n      <ng-container *ngIf=\"sdSuffix?.templateRef\" matSuffix>\r\n        <ng-container *ngTemplateOutlet=\"sdSuffix.templateRef\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-error *ngIf=\"formControl?.errors?.required\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.customValidator\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{formControl.errors?.customValidator}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n<!-- <sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.customValidator\">\r\n    {{formControl.errors?.customValidator}}\r\n  </span>\r\n</sd-popover> -->","styles":[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}: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 input.mat-input-element:disabled{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}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}.sd-md:hover .btn-copy{visibility:visible}.btn-copy{background:#e9e9e9!important;font-size:12px;line-height:26px!important;margin-bottom:3px;visibility:hidden}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3},"arguments":["disableErrorMessage"]}]}],"_blurOnEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3},"arguments":["blurOnEnter"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":86,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"precision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":3}}]}],"sdFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":132,"character":3}}]}],"sdFocusForceBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":3}}]}],"keyupEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":134,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":136,"character":3},"arguments":["control"]}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":142,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":142,"character":16}]}]}],"sdSuffix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":143,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdSuffixDirective","line":143,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":147,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":147,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":147,"character":26}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":146,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":147,"character":57},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":148,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onPaste":[{"__symbolic":"method"}]}}},"origins":{"SdInputNumberModule":"./src/lib/input-number.module","SdInputNumber":"./src/lib/input-number.component"},"importAs":"@sd-angular/core/input-number"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sd-angular/core",
-  "version": "1.1.98",
+  "version": "1.2.2",
   "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":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":27,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":30,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}],"exports":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":39,"character":4}],"providers":[]}]}],"members":{}},"SdSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"sd-select","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":16,"character":19},"member":"OnPush"},"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\" [sdPopoverTriggerFor]=\"error\"\r\n        [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" *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]\">\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-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\">\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-option>\r\n        </ng-container>\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\"\r\n        [sdPopoverTriggerFor]=\"error\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" *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]\">\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-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\">\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-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\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{formControl?.errors?.customValidator}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n<sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.customValidator\">\r\n    {{formControl.errors?.customValidator}}\r\n  </span>\r\n</sd-popover>","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)}"]}]}],"members":{"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":20,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":20,"character":13}]}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":26,"character":3},"arguments":["select"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["disableErrorMessage"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"_label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3},"arguments":["label"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"displayField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"cacheChecksum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"_multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3},"arguments":["multiple"]}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":3}}]}],"_filtered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3},"arguments":["filtered"]}]}],"selectDisplayDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":122,"character":3},"arguments":[{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}]}]}],"_selectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3},"arguments":["selectAll"]}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":128,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":3}}]}],"sdSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":130,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":142,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":142,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":147,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":147,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":147,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":146,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":147,"character":57}]}],"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":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":27,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":30,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}],"exports":[{"__symbolic":"reference","name":"SdSelect"},{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":39,"character":4}],"providers":[]}]}],"members":{}},"SdSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"sd-select","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":16,"character":19},"member":"OnPush"},"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\" [sdPopoverTriggerFor]=\"null\"\r\n        [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" *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]\">\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-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\">\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-option>\r\n        </ng-container>\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\"\r\n        [sdPopoverTriggerFor]=\"null\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" *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]\">\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-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\">\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-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\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{formControl?.errors?.customValidator}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n<!-- <sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl.errors?.customValidator\">\r\n    {{formControl.errors?.customValidator}}\r\n  </span>\r\n</sd-popover> -->","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)}"]}]}],"members":{"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":20,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":20,"character":13}]}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":26,"character":3},"arguments":["select"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["disableErrorMessage"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"_label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3},"arguments":["label"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"displayField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"cacheChecksum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"_multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3},"arguments":["multiple"]}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":3}}]}],"_filtered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3},"arguments":["filtered"]}]}],"selectDisplayDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":122,"character":3},"arguments":[{"__symbolic":"reference","name":"SdSelectDisplayDefDirective"}]}]}],"_selectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3},"arguments":["selectAll"]}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":128,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":3}}]}],"sdSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":130,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":142,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":142,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":147,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":147,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":147,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":146,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":147,"character":57}]}],"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-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":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"}
+{"__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":24,"character":36},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"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=\"editable && sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"deletable && 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=\"editable && sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"deletable && 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=\"addable && 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=\"editable && sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"deletable && 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=\"editable && sdEdit?.observers?.length\" class=\"mr-1 c-fa-icon\" (click)=\"onEdit($event, item)\">\r\n                edit</mat-icon>\r\n              <mat-icon *ngIf=\"deletable && 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=\"addable && 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":25,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelect","line":25,"character":13}]}]}],"addable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"editable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"deletable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"sdAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":3}}]}],"sdEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"sdDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":37,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":37,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":38,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":36,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":39,"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

@@ -6,6 +6,9 @@ export declare class SdSelectEditor extends SdSelect implements OnInit, OnDestro
     private cdRef;
     private formConfiguration;
     matSelect: MatSelect;
+    addable: boolean;
+    editable: boolean;
+    deletable: boolean;
     sdAdd: EventEmitter<any>;
     sdEdit: EventEmitter<any>;
     sdDelete: EventEmitter<any>;