npm - @sd-angular/core - Versions diffs - 0.0.1004 → 0.0.1008 - Mend

@sd-angular/core 0.0.1004 → 0.0.1008

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/fesm2015/sd-angular-core-input.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { v4 } from 'uuid';
 import $ from 'jquery';
 import { debounceTime } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
-import { SdFormControl } from '@sd-angular/core/common';
+import { SdFormControl, SdViewDefDirective, SdCommonModule } from '@sd-angular/core/common';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { SdTranslateModule } from '@sd-angular/core/translate';
@@ -52,6 +52,7 @@ class SdInput {
         this.keyupEnter = new EventEmitter();
         this.formControl = new SdFormControl();
         _subscription.set(this, new Subscription());
+        this.isFocused = false;
         this.reValidate = () => {
             this.formControl.updateValueAndValidity();
         };
@@ -98,6 +99,7 @@ class SdInput {
         };
         this.onFocus = () => {
             var _a;
+            this.isFocused = true;
             this.sdFocus.emit();
             if (((_a = this.sdFocusForceBlur.observers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 this.blur();
@@ -106,14 +108,29 @@ class SdInput {
         };
         this.onBlur = () => {
             var _a;
+            this.isFocused = false;
             const val = ((_a = this.formControl.value) !== null && _a !== void 0 ? _a : '').toString();
             if (val.length > val.trim().length) {
                 this.formControl.setValue(val.trim());
             }
         };
+        this.onClick = () => {
+            var _a;
+            if ((_a = this.sdView) === null || _a === void 0 ? void 0 : _a.templateRef) {
+                if (!this.formControl.disabled && !this.isFocused) {
+                    this.focus();
+                }
+            }
+        };
         this.blur = () => {
             $(this.control.nativeElement).trigger('blur');
         };
+        this.focus = () => {
+            this.isFocused = true;
+            setTimeout(() => {
+                $(this.control.nativeElement).trigger('focus');
+            }, 100);
+        };
         _customValidator.set(this, (func) => {
             return (c) => __awaiter(this, void 0, void 0, function* () {
                 const value = c.value || null;
@@ -224,9 +241,9 @@ _name = new WeakMap(), _form = new WeakMap(), _model = new WeakMap(), _pattern =
 SdInput.decorators = [
     { type: Component, args: [{
                 selector: 'sd-input',
-                template: "<div class=\"d-flex align-items-center\">\r\n  <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-form-tooltip':tooltip, 'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\" appearance=\"outline\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <input [id]=\"id\" [formControl]=\"formControl\" [type]=\"type\" #control matInput [placeholder]=\"placeholder || label\"\r\n      (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [required]=\"isRequired\" [readonly]=\"isReadonly\" [autocomplete]=\"id\"\r\n      autocorrect=\"off\">\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 && !disableErrorMessage\">\r\n      {{'This field is required' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl.errors?.maxlength && !disableErrorMessage\">\r\n      {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl.errors?.pattern && !disableErrorMessage\">\r\n      {{'Pattern error' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl.errors?.customValidator && !disableErrorMessage\">\r\n      <strong>{{formControl.errors?.customValidator}}</strong>\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</div>",
+                template: "<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 }\">\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=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n      <input [id]=\"id\" [formControl]=\"formControl\" [type]=\"type\" #control matInput [placeholder]=\"placeholder || label\"\r\n        (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [required]=\"isRequired\"\r\n        [readonly]=\"isReadonly\" [autocomplete]=\"id\" autocorrect=\"off\">\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 && !disableErrorMessage\">\r\n        {{'This field is required' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.maxlength && !disableErrorMessage\">\r\n        {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.pattern && !disableErrorMessage\">\r\n        {{'Pattern error' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{formControl.errors?.customValidator}}</strong>\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>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                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-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}"]
+                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}"]
             },] }
 ];
 SdInput.ctorParameters = () => [
@@ -258,7 +275,8 @@ SdInput.propDecorators = {
     sdFocusForceBlur: [{ type: Output }],
     keyupEnter: [{ type: Output }],
     control: [{ type: ViewChild, args: ['control',] }],
-    sdInputSuffix: [{ type: ContentChild, args: [SdInputSuffixDirective,] }]
+    sdInputSuffix: [{ type: ContentChild, args: [SdInputSuffixDirective,] }],
+    sdView: [{ type: ContentChild, args: [SdViewDefDirective,] }]
 };
 class SdInputTooltipPipe {
@@ -305,7 +323,8 @@ SdInputModule.decorators = [
                     MatInputModule,
                     MatIconModule,
                     MatTooltipModule,
-                    SdTranslateModule
+                    SdTranslateModule,
+                    SdCommonModule
                 ],
                 declarations: [
                     SdInput,
@@ -316,7 +335,8 @@ SdInputModule.decorators = [
                 exports: [
                     SdInput,
                     SdInputTooltipPipe,
-                    SdInputSuffixDirective
+                    SdInputSuffixDirective,
+                    SdCommonModule
                 ]
             },] }
 ];

package/fesm2015/sd-angular-core-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-input.js","sources":["../../../../projects/sd-core/input/src/lib/directives/input-suffix.directive.ts","../../../../projects/sd-core/input/src/lib/input.component.ts","../../../../projects/sd-core/input/src/lib/input-tooltip.pipe.ts","../../../../projects/sd-core/input/src/lib/directives/touch.directive.ts","../../../../projects/sd-core/input/src/lib/input.module.ts","../../../../projects/sd-core/input/src/public-api.ts","../../../../projects/sd-core/input/sd-angular-core-input.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[sdInputSuffix]'\r\n})\r\nexport class SdInputSuffixDirective {\r\n constructor(public templateRef: TemplateRef<any>) { }\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n ViewChild,\r\n Output,\r\n EventEmitter,\r\n ChangeDetectorRef,\r\n OnDestroy,\r\n AfterViewInit,\r\n ElementRef,\r\n OnInit,\r\n ContentChild,\r\n ChangeDetectionStrategy,\r\n HostListener\r\n} from '@angular/core';\r\nimport { AbstractControl, FormControl, NgForm, ValidatorFn, Validators, AsyncValidatorFn, FormGroup } from '@angular/forms';\r\nimport * as uuid from 'uuid';\r\nimport $ from 'jquery';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { Subscription } from 'rxjs';\r\nimport { SdInputSuffixDirective } from './directives/input-suffix.directive';\r\nimport { SdFormControl } from '@sd-angular/core/common';\r\n\r\n@Component({\r\n selector: 'sd-input',\r\n templateUrl: './input.component.html',\r\n styleUrls: ['./input.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdInput implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() label: string;\r\n @Input() placeholder: string;\r\n @Input() type: 'text' \| 'number' \| 'password' \| 'email' = 'text';\r\n disableErrorMessage = false;\r\n @Input('disableErrorMessage') set _disableErrorMessage(val: boolean \| '') {\r\n this.disableErrorMessage = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n #model: any;\r\n @Input() set model(value: any) {\r\n if (this.#model !== value) {\r\n this.#model = value;\r\n this.formControl.setValue(value, {\r\n emitEvent: false\r\n });\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n\r\n // Validator\r\n isRequired = false;\r\n @Input() set required(val: boolean \| '') {\r\n this.isRequired = (val === '') \|\| val;\r\n this.#updateValidator();\r\n }\r\n\r\n isReadonly = false;\r\n @Input() set readonly(val: boolean \| '') {\r\n this.isReadonly = (val === '') \|\| val;\r\n }\r\n\r\n minlength: number;\r\n @Input('minlength') set pMinlength(val: number) {\r\n this.minlength = +val;\r\n this.#updateValidator();\r\n }\r\n maxlength: number;\r\n @Input('maxlength') set pMaxlength(val: number) {\r\n this.maxlength = +val;\r\n this.#updateValidator();\r\n }\r\n #pattern: string;\r\n @Input() set pattern(val: string) {\r\n this.#pattern = val;\r\n this.#updateValidator();\r\n }\r\n #validator: (value: any) => string \| Promise<string>;\r\n @Input() set validator(validator: (value: any) => string \| Promise<string>) {\r\n this.#validator = validator;\r\n this.#updateValidator();\r\n }\r\n\r\n // Optional\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n @Input() icon = 'search';\r\n hideIcon = false;\r\n @Input('hideIcon') set _hideIcon(val: boolean \| '') {\r\n this.hideIcon = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n @Output() sdClickIcon = new EventEmitter<any>();\r\n @Input() tooltip: string \| ((inputValue: string) => string);\r\n @Output() sdChange = new EventEmitter<any>();\r\n @Output() sdFocus = new EventEmitter<any>();\r\n @Output() sdFocusForceBlur = new EventEmitter<any>();\r\n @Output() keyupEnter = new EventEmitter();\r\n\r\n @ViewChild('control') control: ElementRef;\r\n @ContentChild(SdInputSuffixDirective) sdInputSuffix: SdInputSuffixDirective;\r\n formControl = new SdFormControl();\r\n #subscription = new Subscription();\r\n constructor(public ref: ChangeDetectorRef) {\r\n }\r\n\r\n ngOnInit() {\r\n this.#subscription.add(this.formControl.touchedChanges.subscribe(() => {\r\n this.ref.markForCheck();\r\n }));\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#subscription.add(this.formControl.valueChanges.pipe(debounceTime(200)).subscribe(this.#onChange));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n this.ref.detectChanges();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n reValidate = () => {\r\n this.formControl.updateValueAndValidity();\r\n }\r\n\r\n #updateValidator = () => {\r\n this.formControl.clearValidators();\r\n this.formControl.clearAsyncValidators();\r\n const validators: ValidatorFn[] = [];\r\n const asyncValidators: AsyncValidatorFn[] = [];\r\n if (this.isRequired) {\r\n validators.push(Validators.required);\r\n }\r\n if (this.minlength > 0) {\r\n validators.push(Validators.minLength(this.minlength));\r\n }\r\n if (this.maxlength > 0) {\r\n validators.push(Validators.maxLength(this.maxlength));\r\n }\r\n if (this.#pattern) {\r\n validators.push(Validators.pattern(this.#pattern));\r\n }\r\n if (this.#validator) {\r\n asyncValidators.push(this.#customValidator(this.#validator));\r\n }\r\n this.formControl.setValidators(validators);\r\n this.formControl.setAsyncValidators(asyncValidators);\r\n this.formControl.updateValueAndValidity();\r\n }\r\n\r\n #onChange = (value: any) => {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n\r\n onKeyupEnter = () => {\r\n const val: string = (this.formControl.value ?? '').toString();\r\n if (val.length > val.trim().length) {\r\n this.formControl.setValue(val.trim());\r\n }\r\n this.keyupEnter.emit(this.formControl.value);\r\n }\r\n\r\n onClickIcon = (event: Event) => {\r\n event?.preventDefault();\r\n event?.stopPropagation();\r\n this.sdClickIcon.emit(this.formControl.value);\r\n }\r\n\r\n onFocus = () => {\r\n this.sdFocus.emit();\r\n if (this.sdFocusForceBlur.observers?.length > 0) {\r\n this.blur();\r\n this.sdFocusForceBlur.emit();\r\n }\r\n }\r\n\r\n onBlur = () => {\r\n const val: string = (this.formControl.value ?? '').toString();\r\n if (val.length > val.trim().length) {\r\n this.formControl.setValue(val.trim());\r\n }\r\n }\r\n\r\n blur = () => {\r\n $(this.control.nativeElement).trigger('blur');\r\n }\r\n\r\n #customValidator = (func: (value: any) => string \| Promise<string>): AsyncValidatorFn => {\r\n return async (c: AbstractControl): Promise<{ [key: string]: any } \| null> => {\r\n const value = c.value \|\| null;\r\n if (func && typeof (func) === 'function') {\r\n const result = func(value);\r\n if (result instanceof Promise) {\r\n const message = await result;\r\n if (message) {\r\n return {\r\n customValidator: message\r\n };\r\n }\r\n return null;\r\n }\r\n if (result) {\r\n return {\r\n customValidator: result\r\n };\r\n }\r\n return null;\r\n }\r\n return null;\r\n };\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n@Pipe({\r\n name: 'sdInputTooltipPipe'\r\n})\r\nexport class SdInputTooltipPipe implements PipeTransform {\r\n transform(value: any, tooltip: string \| ((inputValue: string) => string)): string {\r\n if (typeof (tooltip) === 'string') {\r\n return tooltip;\r\n }\r\n return tooltip(value);\r\n }\r\n}\r\n","import { ChangeDetectorRef, Directive, Input, OnChanges, SimpleChanges } from \"@angular/core\";\r\n\r\n@Directive({\r\n selector: '[touch]'\r\n})\r\nexport class TouchDirective implements OnChanges {\r\n @Input() public touch: any;\r\n @Input() public ref: ChangeDetectorRef;\r\n\r\n ngOnChanges(changes: SimpleChanges){\r\n console.log(changes);\r\n if(changes.touch){\r\n this.ref.markForCheck();\r\n }\r\n }\r\n}","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdInput } from './input.component';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SdInputTooltipPipe } from './input-tooltip.pipe';\r\nimport { SdInputSuffixDirective } from './directives/input-suffix.directive';\r\nimport { TouchDirective } from './directives/touch.directive';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatTooltipModule,\r\n SdTranslateModule\r\n ],\r\n declarations: [\r\n SdInput,\r\n SdInputTooltipPipe,\r\n SdInputSuffixDirective,\r\n TouchDirective\r\n ],\r\n exports: [\r\n SdInput,\r\n SdInputTooltipPipe,\r\n SdInputSuffixDirective\r\n ]\r\n})\r\nexport class SdInputModule { }\r\n","/\r\n Public API Surface of superdev-angular-core\r\n /\r\n\r\nexport from './lib/input.module';\r\nexport * from './lib/input-tooltip.pipe';\r\nexport * from './lib/directives/input-suffix.directive';\r\nexport * from './lib/input.component';\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n\nexport {TouchDirective as ɵa} from './src/lib/directives/touch.directive';"],"names":["uuid.v4"],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-input.js","sources":["../../../../projects/sd-core/input/src/lib/directives/input-suffix.directive.ts","../../../../projects/sd-core/input/src/lib/input.component.ts","../../../../projects/sd-core/input/src/lib/input-tooltip.pipe.ts","../../../../projects/sd-core/input/src/lib/directives/touch.directive.ts","../../../../projects/sd-core/input/src/lib/input.module.ts","../../../../projects/sd-core/input/src/public-api.ts","../../../../projects/sd-core/input/sd-angular-core-input.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[sdInputSuffix]'\r\n})\r\nexport class SdInputSuffixDirective {\r\n constructor(public templateRef: TemplateRef<any>) { }\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n ViewChild,\r\n Output,\r\n EventEmitter,\r\n ChangeDetectorRef,\r\n OnDestroy,\r\n AfterViewInit,\r\n ElementRef,\r\n OnInit,\r\n ContentChild,\r\n ChangeDetectionStrategy,\r\n HostListener\r\n} from '@angular/core';\r\nimport { AbstractControl, FormControl, NgForm, ValidatorFn, Validators, AsyncValidatorFn, FormGroup } from '@angular/forms';\r\nimport * as uuid from 'uuid';\r\nimport $ from 'jquery';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { Subscription } from 'rxjs';\r\nimport { SdInputSuffixDirective } from './directives/input-suffix.directive';\r\nimport { SdFormControl } from '@sd-angular/core/common';\r\nimport { SdViewDefDirective } from '@sd-angular/core/common';\r\n\r\n@Component({\r\n selector: 'sd-input',\r\n templateUrl: './input.component.html',\r\n styleUrls: ['./input.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdInput implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() label: string;\r\n @Input() placeholder: string;\r\n @Input() type: 'text' \| 'number' \| 'password' \| 'email' = 'text';\r\n disableErrorMessage = false;\r\n @Input('disableErrorMessage') set _disableErrorMessage(val: boolean \| '') {\r\n this.disableErrorMessage = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n #model: any;\r\n @Input() set model(value: any) {\r\n if (this.#model !== value) {\r\n this.#model = value;\r\n this.formControl.setValue(value, {\r\n emitEvent: false\r\n });\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n\r\n // Validator\r\n isRequired = false;\r\n @Input() set required(val: boolean \| '') {\r\n this.isRequired = (val === '') \|\| val;\r\n this.#updateValidator();\r\n }\r\n\r\n isReadonly = false;\r\n @Input() set readonly(val: boolean \| '') {\r\n this.isReadonly = (val === '') \|\| val;\r\n }\r\n\r\n minlength: number;\r\n @Input('minlength') set pMinlength(val: number) {\r\n this.minlength = +val;\r\n this.#updateValidator();\r\n }\r\n maxlength: number;\r\n @Input('maxlength') set pMaxlength(val: number) {\r\n this.maxlength = +val;\r\n this.#updateValidator();\r\n }\r\n #pattern: string;\r\n @Input() set pattern(val: string) {\r\n this.#pattern = val;\r\n this.#updateValidator();\r\n }\r\n #validator: (value: any) => string \| Promise<string>;\r\n @Input() set validator(validator: (value: any) => string \| Promise<string>) {\r\n this.#validator = validator;\r\n this.#updateValidator();\r\n }\r\n\r\n // Optional\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n @Input() icon = 'search';\r\n hideIcon = false;\r\n @Input('hideIcon') set _hideIcon(val: boolean \| '') {\r\n this.hideIcon = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n @Output() sdClickIcon = new EventEmitter<any>();\r\n @Input() tooltip: string \| ((inputValue: string) => string);\r\n @Output() sdChange = new EventEmitter<any>();\r\n @Output() sdFocus = new EventEmitter<any>();\r\n @Output() sdFocusForceBlur = new EventEmitter<any>();\r\n @Output() keyupEnter = new EventEmitter();\r\n\r\n @ViewChild('control') control: ElementRef;\r\n @ContentChild(SdInputSuffixDirective) sdInputSuffix: SdInputSuffixDirective;\r\n formControl = new SdFormControl();\r\n #subscription = new Subscription();\r\n @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n isFocused = false;\r\n constructor(public ref: ChangeDetectorRef) {\r\n }\r\n\r\n ngOnInit() {\r\n this.#subscription.add(this.formControl.touchedChanges.subscribe(() => {\r\n this.ref.markForCheck();\r\n }));\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#subscription.add(this.formControl.valueChanges.pipe(debounceTime(200)).subscribe(this.#onChange));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n this.ref.detectChanges();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n reValidate = () => {\r\n this.formControl.updateValueAndValidity();\r\n }\r\n\r\n #updateValidator = () => {\r\n this.formControl.clearValidators();\r\n this.formControl.clearAsyncValidators();\r\n const validators: ValidatorFn[] = [];\r\n const asyncValidators: AsyncValidatorFn[] = [];\r\n if (this.isRequired) {\r\n validators.push(Validators.required);\r\n }\r\n if (this.minlength > 0) {\r\n validators.push(Validators.minLength(this.minlength));\r\n }\r\n if (this.maxlength > 0) {\r\n validators.push(Validators.maxLength(this.maxlength));\r\n }\r\n if (this.#pattern) {\r\n validators.push(Validators.pattern(this.#pattern));\r\n }\r\n if (this.#validator) {\r\n asyncValidators.push(this.#customValidator(this.#validator));\r\n }\r\n this.formControl.setValidators(validators);\r\n this.formControl.setAsyncValidators(asyncValidators);\r\n this.formControl.updateValueAndValidity();\r\n }\r\n\r\n #onChange = (value: any) => {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n\r\n onKeyupEnter = () => {\r\n const val: string = (this.formControl.value ?? '').toString();\r\n if (val.length > val.trim().length) {\r\n this.formControl.setValue(val.trim());\r\n }\r\n this.keyupEnter.emit(this.formControl.value);\r\n }\r\n\r\n onClickIcon = (event: Event) => {\r\n event?.preventDefault();\r\n event?.stopPropagation();\r\n this.sdClickIcon.emit(this.formControl.value);\r\n }\r\n\r\n onFocus = () => {\r\n this.isFocused = true;\r\n this.sdFocus.emit();\r\n if (this.sdFocusForceBlur.observers?.length > 0) {\r\n this.blur();\r\n this.sdFocusForceBlur.emit();\r\n }\r\n }\r\n\r\n onBlur = () => {\r\n this.isFocused = false;\r\n const val: string = (this.formControl.value ?? '').toString();\r\n if (val.length > val.trim().length) {\r\n this.formControl.setValue(val.trim());\r\n }\r\n }\r\n\r\n onClick = () => {\r\n if(this.sdView?.templateRef) {\r\n if(!this.formControl.disabled && !this.isFocused) {\r\n this.focus();\r\n }\r\n }\r\n }\r\n\r\n blur = () => {\r\n $(this.control.nativeElement).trigger('blur');\r\n }\r\n\r\n focus = () => {\r\n this.isFocused = true;\r\n setTimeout(() => {\r\n $(this.control.nativeElement).trigger('focus');\r\n }, 100);\r\n }\r\n\r\n #customValidator = (func: (value: any) => string \| Promise<string>): AsyncValidatorFn => {\r\n return async (c: AbstractControl): Promise<{ [key: string]: any } \| null> => {\r\n const value = c.value \|\| null;\r\n if (func && typeof (func) === 'function') {\r\n const result = func(value);\r\n if (result instanceof Promise) {\r\n const message = await result;\r\n if (message) {\r\n return {\r\n customValidator: message\r\n };\r\n }\r\n return null;\r\n }\r\n if (result) {\r\n return {\r\n customValidator: result\r\n };\r\n }\r\n return null;\r\n }\r\n return null;\r\n };\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n@Pipe({\r\n name: 'sdInputTooltipPipe'\r\n})\r\nexport class SdInputTooltipPipe implements PipeTransform {\r\n transform(value: any, tooltip: string \| ((inputValue: string) => string)): string {\r\n if (typeof (tooltip) === 'string') {\r\n return tooltip;\r\n }\r\n return tooltip(value);\r\n }\r\n}\r\n","import { ChangeDetectorRef, Directive, Input, OnChanges, SimpleChanges } from \"@angular/core\";\r\n\r\n@Directive({\r\n selector: '[touch]'\r\n})\r\nexport class TouchDirective implements OnChanges {\r\n @Input() public touch: any;\r\n @Input() public ref: ChangeDetectorRef;\r\n\r\n ngOnChanges(changes: SimpleChanges){\r\n console.log(changes);\r\n if(changes.touch){\r\n this.ref.markForCheck();\r\n }\r\n }\r\n}","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdInput } from './input.component';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SdInputTooltipPipe } from './input-tooltip.pipe';\r\nimport { SdInputSuffixDirective } from './directives/input-suffix.directive';\r\nimport { TouchDirective } from './directives/touch.directive';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatTooltipModule,\r\n SdTranslateModule,\r\n SdCommonModule\r\n ],\r\n declarations: [\r\n SdInput,\r\n SdInputTooltipPipe,\r\n SdInputSuffixDirective,\r\n TouchDirective\r\n ],\r\n exports: [\r\n SdInput,\r\n SdInputTooltipPipe,\r\n SdInputSuffixDirective,\r\n SdCommonModule\r\n ]\r\n})\r\nexport class SdInputModule { }\r\n","/\r\n Public API Surface of superdev-angular-core\r\n /\r\n\r\nexport from './lib/input.module';\r\nexport * from './lib/input-tooltip.pipe';\r\nexport * from './lib/directives/input-suffix.directive';\r\nexport * from './lib/input.component';\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n\nexport {TouchDirective as ɵa} from './src/lib/directives/touch.directive';"],"names":["uuid.v4"],"mappings":"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"}

package/fesm2015/sd-angular-core-select.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { v4 } from 'uuid';
 import { Subject, Subscription, combineLatest } from 'rxjs';
 import { startWith, debounceTime, switchMap, map } from 'rxjs/operators';
 import { SdUtilityService } from '@sd-angular/core/utility';
-import { SdFormControl } from '@sd-angular/core/common';
+import { SdFormControl, SdViewDefDirective, SdCommonModule } from '@sd-angular/core/common';
 import { MatSelectModule } from '@angular/material/select';
 import { SdTranslateModule } from '@sd-angular/core/translate';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -31,7 +31,7 @@ SdSelectDisplayDefDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-var _input, _name, _form, _items, _currentItems, _allItem, _delay, _validator, _allItems, _subscription, _updateValidator, _search, _loadItems, _onChange, _customValidator;
+var _input, _name, _form, _items, _delay, _validator, _subscription, _selectedItems, _allItems, _allItem, _updateValidator, _loadSelectedItems, _loadItems, _onChange, _customValidator;
 class SdSelect {
     constructor(ref, utilityService) {
         this.ref = ref;
@@ -44,8 +44,6 @@ class SdSelect {
         _form.set(this, void 0);
         // Items
         _items.set(this, []);
-        _currentItems.set(this, []);
-        _allItem.set(this, {});
         // Server search
         this.loading = false;
         _delay.set(this, 500); // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện gọi hàm
@@ -56,12 +54,15 @@ class SdSelect {
         this.limit = 100;
         this.filtered = false;
         this.selectAll = false;
-        _allItems.set(this, void 0);
-        this.allSelected = false;
         this.modelChange = new EventEmitter();
         this.sdChange = new EventEmitter();
         this.sdSelection = new EventEmitter();
         _subscription.set(this, new Subscription());
+        _selectedItems.set(this, void 0);
+        _allItems.set(this, void 0);
+        _allItem.set(this, {});
+        this.allSelected = false;
+        this.isFocused = false;
         _updateValidator.set(this, () => {
             this.formControl.clearValidators();
             this.formControl.clearAsyncValidators();
@@ -77,42 +78,29 @@ class SdSelect {
             this.formControl.setAsyncValidators(asyncValidators);
             this.formControl.updateValueAndValidity();
         });
-        _search.set(this, (value, items) => __awaiter(this, void 0, void 0, function* () {
-            const results = yield items(value).catch(() => []);
-            if (Array.isArray(value)) {
-                return results.filter(e => !!e && (value.includes(e) || value.includes(e[this.valueField])));
+        _loadSelectedItems.set(this, (value, items) => __awaiter(this, void 0, void 0, function* () {
+            if (!(value === null || value === void 0 ? void 0 : value.toString())) {
+                return [];
+            }
+            const values = Array.isArray(value) ? value : [value];
+            if (!this.valueField && !this.displayField) {
+                return values;
+            }
+            this.loading = true;
+            if (values.some(val => __classPrivateFieldGet(this, _allItem)[val] === undefined)) {
+                const results = yield items(value, true).finally(() => this.loading = false);
+                const objItem = this.valueField ? this.utilityService.arrayToObject(results, this.valueField) : results.forEach(item => objItem[item === null || item === void 0 ? void 0 : item.toString()] = item);
+                __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign(Object.assign({}, values.map(val => ({ [val]: { [this.valueField]: val, [this.displayField]: val } }))), __classPrivateFieldGet(this, _allItem)), objItem));
             }
-            return results.filter(e => !!e && (e === value || e[this.valueField] === value));
+            return values.map(val => __classPrivateFieldGet(this, _allItem)[val]);
         }));
         _loadItems.set(this, (searchText, items) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
             this.loading = true;
             const results = yield items(searchText).finally(() => this.loading = false);
             const objItem = this.valueField ? this.utilityService.arrayToObject(results, this.valueField) : results.forEach(item => objItem[item === null || item === void 0 ? void 0 : item.toString()] = item);
-            Object.assign(__classPrivateFieldGet(this, _allItem), objItem);
-            if (!((_a = this.formControl.value) === null || _a === void 0 ? void 0 : _a.toString())) {
-                return results;
-            }
-            const values = Array.isArray(this.formControl.value) ? this.formControl.value : [this.formControl.value];
-            values.map(val => val === null || val === void 0 ? void 0 : val.toString()).forEach(val => {
-                if (!objItem[val]) {
-                    if (__classPrivateFieldGet(this, _allItem)[val]) {
-                        results.push(__classPrivateFieldGet(this, _allItem)[val]);
-                    }
-                    else {
-                        if (this.valueField && this.displayField) {
-                            results.push({
-                                [this.valueField]: val,
-                                [this.displayField]: val
-                            });
-                        }
-                        else {
-                            results.push(val);
-                        }
-                    }
-                }
-            });
-            return results;
+            __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _allItem)), objItem));
+            const selectedItems = yield __classPrivateFieldGet(this, _loadSelectedItems).call(this, this.formControl.value, items);
+            return [...selectedItems, ...results];
         }));
         this.onSelectionChange = (change) => {
             var _a;
@@ -130,13 +118,12 @@ class SdSelect {
             this.formControl.updateValueAndValidity({ emitEvent: true });
         };
         _onChange.set(this, (value) => {
-            var _a, _b;
             if (Array.isArray(value)) {
                 this.modelChange.emit(value);
                 this.sdChange.emit(value);
                 this.sdSelection.emit({
                     value: value,
-                    items: (_a = __classPrivateFieldGet(this, _currentItems)) === null || _a === void 0 ? void 0 : _a.filter(e => value.some(e1 => e1 === (e === null || e === void 0 ? void 0 : e[this.valueField])))
+                    items: this.selectedItems
                 });
             }
             else {
@@ -144,7 +131,7 @@ class SdSelect {
                 this.sdChange.emit(value);
                 this.sdSelection.emit({
                     value: value,
-                    item: (_b = __classPrivateFieldGet(this, _currentItems)) === null || _b === void 0 ? void 0 : _b.find(e => value === (e === null || e === void 0 ? void 0 : e[this.valueField]))
+                    item: this.selectedItems[0]
                 });
             }
         });
@@ -169,6 +156,22 @@ class SdSelect {
                 });
             }
         };
+        this.onClick = () => {
+            var _a;
+            if ((_a = this.sdView) === null || _a === void 0 ? void 0 : _a.templateRef) {
+                if (!this.formControl.disabled && !this.isFocused) {
+                    this.focus();
+                }
+            }
+        };
+        this.focus = () => {
+            this.isFocused = true;
+            setTimeout(() => {
+                var _a, _b;
+                (_a = this.select) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.select) === null || _b === void 0 ? void 0 : _b.open();
+            }, 100);
+        };
         _customValidator.set(this, (func) => {
             return (c) => __awaiter(this, void 0, void 0, function* () {
                 const value = c.value || null;
@@ -195,11 +198,15 @@ class SdSelect {
         });
         this.onOpenChange = (isOpened) => {
             if (isOpened) {
+                this.isFocused = true;
                 if (__classPrivateFieldGet(this, _input)) {
                     __classPrivateFieldGet(this, _input).value = null;
                 }
                 this.searchTerm$.next('');
             }
+            else {
+                this.isFocused = false;
+            }
         };
     }
     set input(input) {
@@ -228,20 +235,7 @@ class SdSelect {
         }
     }
     set model(value) {
-        // this.#model = value;
-        // if (Array.isArray(value)) {
-        //   this.formControl.setValue(value.map(val => (val ?? '') + ''));
-        // } else {
-        //   this.formControl.setValue((value ?? '') + '');
-        // }
-        // this.ref.detectChanges();
-        // this.#model = value;
-        if (Array.isArray(value)) {
-            this.formControl.setValue(value);
-        }
-        else {
-            this.formControl.setValue(value);
-        }
+        this.formControl.setValue(value);
     }
     set items(items) {
         if (!items) {
@@ -286,13 +280,15 @@ class SdSelect {
         __classPrivateFieldGet(this, _subscription).add(this.formControl.touchedChanges.subscribe(() => {
             this.ref.markForCheck();
         }));
-        __classPrivateFieldSet(this, _allItems, this.searchTerm$.asObservable().pipe(startWith(''), debounceTime(typeof (__classPrivateFieldGet(this, _items)) === 'function' ? __classPrivateFieldGet(this, _delay) : 0), switchMap((val) => __awaiter(this, void 0, void 0, function* () {
+        __classPrivateFieldSet(this, _allItems, combineLatest([
+            this.searchTerm$.asObservable().pipe(startWith(''), debounceTime(typeof (__classPrivateFieldGet(this, _items)) === 'function' ? __classPrivateFieldGet(this, _delay) : 0)),
+            this.formControl.valueChanges.pipe(startWith(this.formControl.value))
+        ]).pipe(switchMap(([val, formValue]) => __awaiter(this, void 0, void 0, function* () {
             if (typeof (__classPrivateFieldGet(this, _items)) === 'function') {
                 return yield __classPrivateFieldGet(this, _loadItems).call(this, val, __classPrivateFieldGet(this, _items));
             }
             const { changeAliasLowerCase } = this.utilityService;
             const searchText = changeAliasLowerCase(val);
-            const formValue = this.formControl.value;
             const isArray = Array.isArray(formValue);
             const hasFields = !!this.valueField && !!this.displayField;
             return __classPrivateFieldGet(this, _items).filter(item => {
@@ -333,19 +329,22 @@ class SdSelect {
                 return 0;
             });
         }))));
-        this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(map(allItems => {
-            __classPrivateFieldSet(this, _currentItems, allItems);
-            return allItems.filter((item, index) => index < this.limit);
-        }));
-        this.display = combineLatest([__classPrivateFieldGet(this, _allItems), this.formControl.valueChanges.pipe(startWith(this.formControl.value))]).pipe(map(([items, formValue]) => {
-            const isArray = Array.isArray(formValue);
-            if (!this.valueField || !this.displayField) {
-                return isArray ? formValue === null || formValue === void 0 ? void 0 : formValue.join(', ') : formValue;
+        __classPrivateFieldSet(this, _selectedItems, __classPrivateFieldGet(this, _allItems).pipe(map(items => {
+            const formValue = this.formControl.value;
+            if (!(formValue === null || formValue === void 0 ? void 0 : formValue.toString())) {
+                return [];
             }
-            return items.filter(e => isArray ? formValue.includes(e[this.valueField]) : formValue === e[this.valueField])
-                .map(e => { var _a; return (_a = e[this.displayField]) === null || _a === void 0 ? void 0 : _a.toString(); })
-                .join(', ');
-        }));
+            const values = Array.isArray(formValue) ? formValue : [formValue];
+            this.selectedItems = values.map(val => {
+                if (this.valueField) {
+                    return items === null || items === void 0 ? void 0 : items.find(item => item[this.valueField] === val);
+                }
+                return val;
+            });
+            return this.selectedItems;
+        })));
+        this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(map(allItems => allItems.filter((item, index) => index < this.limit)));
+        this.display = __classPrivateFieldGet(this, _selectedItems).pipe(map(selectedItems => { var _a; return (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => this.displayField ? item[this.displayField] : item)) === null || _a === void 0 ? void 0 : _a.join(', '); }));
     }
     ngAfterViewInit() {
         var _a;
@@ -366,13 +365,13 @@ class SdSelect {
         __classPrivateFieldGet(this, _onChange).call(this, this.formControl.value);
     }
 }
-_input = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _items = new WeakMap(), _currentItems = new WeakMap(), _allItem = new WeakMap(), _delay = new WeakMap(), _validator = new WeakMap(), _allItems = new WeakMap(), _subscription = new WeakMap(), _updateValidator = new WeakMap(), _search = new WeakMap(), _loadItems = new WeakMap(), _onChange = new WeakMap(), _customValidator = new WeakMap();
+_input = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _items = new WeakMap(), _delay = new WeakMap(), _validator = new WeakMap(), _subscription = new WeakMap(), _selectedItems = new WeakMap(), _allItems = new WeakMap(), _allItem = new WeakMap(), _updateValidator = new WeakMap(), _loadSelectedItems = new WeakMap(), _loadItems = new WeakMap(), _onChange = new WeakMap(), _customValidator = new WeakMap();
 SdSelect.decorators = [
     { type: Component, args: [{
                 selector: 'sd-select',
-                template: "<div class=\"d-flex align-items-center\">\r\n  <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\"\r\n    appearance=\"outline\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\" multiple\r\n      (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n      [ngClass]=\"{'sd-selected': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}\"\r\n      [required]=\"isRequired\" (openedChange)=\"onOpenChange($event)\" *ngIf=\"multiple\">\r\n      <mat-select-trigger>\r\n        {{display | async }}\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n          <mat-icon matPrefix>search</mat-icon>\r\n          <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n        </mat-form-field>\r\n      </mat-option>\r\n      <ng-container *ngIf=\"multiple && selectAll\">\r\n        <mat-checkbox class=\"mat-option\" [(ngModel)]=\"allSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n          (change)=\"onSelectAll()\">\r\n          T\u1EA5t c\u1EA3</mat-checkbox>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"valueField && displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item[displayField] }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!valueField && !displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\"\r\n      (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n      [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\" [required]=\"isRequired\"\r\n      (openedChange)=\"onOpenChange($event)\" *ngIf=\"!multiple\">\r\n      <mat-select-trigger>\r\n        {{display | async }}\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n          <mat-icon matPrefix>search</mat-icon>\r\n          <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n        </mat-form-field>\r\n      </mat-option>\r\n      <ng-container *ngIf=\"valueField && displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item[displayField] }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!valueField && !displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n    <mat-icon\r\n      *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled\"\r\n      class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel\r\n    </mat-icon>\r\n    <mat-error *ngIf=\"formControl.errors?.required && !disableErrorMessage\">\r\n      {{'This field is required' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n      {{formControl?.errors?.customValidator}}\r\n    </mat-error>\r\n  </mat-form-field>\r\n</div>",
+                template: "<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 }\">\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=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n      <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\" multiple\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}\"\r\n        [required]=\"isRequired\" (openedChange)=\"onOpenChange($event)\" *ngIf=\"multiple\">\r\n        <mat-select-trigger>\r\n          {{display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n          <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf=\"multiple && selectAll\">\r\n          <mat-checkbox class=\"mat-option\" [(ngModel)]=\"allSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n            (change)=\"onSelectAll()\">\r\n            T\u1EA5t c\u1EA3</mat-checkbox>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"valueField && displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item[displayField]\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item[displayField] }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!valueField && !displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\"\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\" [required]=\"isRequired\"\r\n        (openedChange)=\"onOpenChange($event)\" *ngIf=\"!multiple\">\r\n        <mat-select-trigger>\r\n          {{display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n          <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf=\"valueField && displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item[displayField]\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item[displayField] }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!valueField && !displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-icon\r\n        *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"formControl.errors?.required && !disableErrorMessage\">\r\n        {{'This field is required' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        {{formControl?.errors?.customValidator}}\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none}:host ::ng-deep .sd-selected .mat-select-arrow{border:none}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field mat-select.mat-select-disabled .mat-select-value{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}::ng-deep .sd-select-panel .mat-option.sd-filtered-input{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline{width:100%}::ng-deep .sd-select-panel .mat-option.sd-filtered-input mat-pseudo-checkbox{display:none}::ng-deep .mat-select-panel .mat-option.sd-filtered-input{height:auto}::ng-deep .sd-select-panel .mat-option.sd-filtered-input input{color:#000}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field-prefix .mat-icon{margin-right:0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding:10px 0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-outline{background-color:rgba(0,0,0,.04)}"]
+                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)}"]
             },] }
 ];
 SdSelect.ctorParameters = () => [
@@ -402,7 +401,8 @@ SdSelect.propDecorators = {
     _selectAll: [{ type: Input, args: ['selectAll',] }],
     modelChange: [{ type: Output }],
     sdChange: [{ type: Output }],
-    sdSelection: [{ type: Output }]
+    sdSelection: [{ type: Output }],
+    sdView: [{ type: ContentChild, args: [SdViewDefDirective,] }]
 };
 class SdSelectModule {
@@ -420,7 +420,8 @@ SdSelectModule.decorators = [
                     MatSelectModule,
                     MatProgressSpinnerModule,
                     MatCheckboxModule,
-                    SdTranslateModule
+                    SdTranslateModule,
+                    SdCommonModule
                 ],
                 declarations: [
                     SdSelect,
@@ -428,7 +429,8 @@ SdSelectModule.decorators = [
                 ],
                 exports: [
                     SdSelect,
-                    SdSelectDisplayDefDirective
+                    SdSelectDisplayDefDirective,
+                    SdCommonModule
                 ],
                 providers: []
             },] }