@sd-angular/core 1.2.81 → 1.2.84

package/fesm2015/sd-angular-core-modal.js

@@ -77,7 +77,7 @@ SdModal.index = 0;
 SdModal.decorators = [
     { type: Component, args: [{
                 selector: 'sd-modal',
-                template: "<ng-template #templateRef>\r\n  <ng-container *ngIf=\"!lazyLoadContent || alreadyOpened\">\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <button *ngIf=\"!noClose\" class=\"float-right\" type=\"button\" (click)=\"close()\" mat-icon-button>\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </sd-modal-header>\r\n    <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-100 mh-100\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>",
+                template: "<ng-template #templateRef>\r\n  <ng-container *ngIf=\"!lazyLoadContent || alreadyOpened\">\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button *ngIf=\"!noClose\" type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n    <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-100 mh-100\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{margin-bottom:0;min-height:auto;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{display:block;padding:12px 24px;width:100%}@media (max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{border-top-left-radius:4px;border-top-right-radius:4px;box-sizing:border-box;display:flex;flex-direction:column;max-height:80vh;min-width:100vw;outline:0;overflow:hidden;padding:0}"]

package/fesm2015/sd-angular-core-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-modal.js","sources":["../../../../projects/sd-core/modal/src/lib/modal/modal.component.ts","../../../../projects/sd-core/modal/src/lib/modal/modal-header/modal-header.component.ts","../../../../projects/sd-core/modal/src/lib/modal/modal-body/modal-body.component.ts","../../../../projects/sd-core/modal/src/lib/modal/modal-footer/modal-footer.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet-header/bottom-sheet-header.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet-body/bottom-sheet-body.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet-footer/bottom-sheet-footer.component.ts","../../../../projects/sd-core/modal/src/lib/modal.module.ts","../../../../projects/sd-core/modal/src/public-api.ts","../../../../projects/sd-core/modal/sd-angular-core-modal.ts"],"sourcesContent":["import { Component, ElementRef, Input, ViewChild, OnInit, OnDestroy, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\r\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatBottomSheet } from '@angular/material/bottom-sheet';\r\nimport { MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\nimport { Subscription } from 'rxjs';\r\n\r\n@Component({\r\n  selector: 'sd-modal',\r\n  templateUrl: './modal.component.html',\r\n  styleUrls: ['./modal.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdModal implements OnInit, OnDestroy {\r\n  static index = 0;\r\n  @ViewChild('templateRef') templateRef: TemplateRef<any>;\r\n  @Input() title: string;\r\n  @Input() noClose: boolean;\r\n  @Input() type: 'primary' | 'info' | 'success' | 'warning' | 'danger';\r\n  @Input() width: 'lg' | 'md' | 'sm' | string;\r\n  @Input() height = 'auto';\r\n  @Input() view: 'dialog' | 'bottomSheet';\r\n  @Input() lazyLoadContent = true;\r\n  @Input() closeClickOutSide: boolean;\r\n  @ViewChild('modal') modal: ElementRef;\r\n  isOpened = false;\r\n  alreadyOpened = false;\r\n  isMobileOrTablet = false;\r\n  private bottomSheetRef: MatBottomSheetRef<any>;\r\n  private dialogRef: MatDialogRef<any>;\r\n  private subcription = new Subscription();\r\n  constructor(\r\n    private ref: ChangeDetectorRef,\r\n    private dialog: MatDialog,\r\n    private bottomSheet: MatBottomSheet,\r\n    deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n  ngOnInit(): void {\r\n    this.type = this.type || 'primary';\r\n    this.width = this.width || '80vw';\r\n    if (!this.isMobileOrTablet) {\r\n      switch (this.width) {\r\n        case 'lg':\r\n          this.width = '80vw';\r\n          break;\r\n        case 'md':\r\n          this.width = '60vw';\r\n          break;\r\n        case 'sm':\r\n          this.width = '40vw';\r\n          break;\r\n      }\r\n    }\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.subcription?.unsubscribe();\r\n  }\r\n\r\n  open = (): void => {\r\n    if (this.isOpened) {\r\n      return;\r\n    }\r\n    this.ref.markForCheck();\r\n    this.alreadyOpened = true;\r\n    this.isOpened = true;\r\n    if ((!this.view && this.isMobileOrTablet) || this.view === 'bottomSheet') {\r\n      this.bottomSheetRef = this.bottomSheet.open(this.templateRef);\r\n      this.subcription.add(this.bottomSheetRef.afterDismissed().subscribe(() => {\r\n        this.isOpened = false;\r\n      }));\r\n    } else {\r\n      this.dialogRef = this.dialog.open(this.templateRef, {\r\n        width: this.width,\r\n        maxWidth: this.width,\r\n        disableClose: !this.closeClickOutSide // mặc định ko cho đóng modal khi click out side\r\n      });\r\n      this.subcription.add(this.dialogRef.afterClosed().subscribe(() => {\r\n        this.isOpened = false;\r\n      }));\r\n    }\r\n  }\r\n\r\n  close = (): void => {\r\n    this.ref.markForCheck();\r\n    this.bottomSheetRef?.dismiss();\r\n    this.dialogRef?.close();\r\n  }\r\n}\r\n","import { Component, OnInit, ViewEncapsulation } from '@angular/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\n\r\n@Component({\r\n  selector: 'sd-modal-header',\r\n  templateUrl: './modal-header.component.html',\r\n  styleUrls: [\r\n    './modal-header.component.scss'],\r\n  encapsulation: ViewEncapsulation.None\r\n})\r\nexport class SdModalHeader implements OnInit {\r\n  isMobileOrTablet = false;\r\n  constructor(deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\n\r\n@Component({\r\n  selector: 'sd-modal-body',\r\n  templateUrl: './modal-body.component.html',\r\n  styleUrls: ['./modal-body.component.scss'],\r\n})\r\nexport class SdModalBody implements OnInit {\r\n  @Input() height = 'auto';\r\n  isMobileOrTablet = false;\r\n  constructor(deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { Component, OnInit, ViewEncapsulation } from '@angular/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\n\r\n@Component({\r\n  selector: 'sd-modal-footer',\r\n  templateUrl: './modal-footer.component.html',\r\n  styleUrls: ['./modal-footer.component.scss']\r\n})\r\nexport class SdModalFooter implements OnInit {\r\n  isMobileOrTablet = false;\r\n  constructor(deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n}\r\n","import { Component, ViewChild, TemplateRef, Input } from '@angular/core';\r\nimport { MatBottomSheet } from '@angular/material/bottom-sheet';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet',\r\n  templateUrl: './bottom-sheet.component.html'\r\n})\r\nexport class SdBottomSheet {\r\n  @ViewChild('templateRef') templateRef: TemplateRef<OptionTemplateContext>;\r\n  @Input() title: string;\r\n  isOpened = false;\r\n  constructor(\r\n    private bottomSheet: MatBottomSheet,\r\n  ) { }\r\n\r\n  open = () => {\r\n    this.isOpened = true;\r\n    this.bottomSheet.open(this.templateRef);\r\n  }\r\n\r\n  close = () => {\r\n    this.bottomSheet.dismiss();\r\n  }\r\n}\r\n\r\ninterface OptionTemplateContext {\r\n  $implicit: any;\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet-header',\r\n  templateUrl: './bottom-sheet-header.component.html'\r\n})\r\nexport class SdBottomSheetHeader implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet-body',\r\n  templateUrl: './bottom-sheet-body.component.html'\r\n})\r\nexport class SdBottomSheetBody implements OnInit {\r\n  @Input() height = 'auto';\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet-footer',\r\n  templateUrl: './bottom-sheet-footer.component.html',\r\n  styleUrls: ['./bottom-sheet-footer.component.scss']\r\n})\r\nexport class SdBottomSheetFooter implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdModal } from './modal/modal.component';\r\nimport { SdModalHeader } from './modal/modal-header/modal-header.component';\r\nimport { SdModalBody } from './modal/modal-body/modal-body.component';\r\nimport { SdModalFooter } from './modal/modal-footer/modal-footer.component';\r\nimport { SdBottomSheet } from './bottom-sheet/bottom-sheet.component';\r\nimport { SdBottomSheetHeader } from './bottom-sheet/bottom-sheet-header/bottom-sheet-header.component';\r\nimport { SdBottomSheetBody } from './bottom-sheet/bottom-sheet-body/bottom-sheet-body.component';\r\nimport { SdBottomSheetFooter } from './bottom-sheet/bottom-sheet-footer/bottom-sheet-footer.component';\r\n\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatBottomSheetModule } from '@angular/material/bottom-sheet';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { SdButtonModule } from '@sd-angular/core/button';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    MatBottomSheetModule,\r\n    MatDialogModule,\r\n    MatButtonModule,\r\n    SdButtonModule\r\n  ],\r\n  declarations: [\r\n    SdModal,\r\n    SdModalHeader,\r\n    SdModalBody,\r\n    SdModalFooter,\r\n    SdBottomSheet,\r\n    SdBottomSheetHeader,\r\n    SdBottomSheetBody,\r\n    SdBottomSheetFooter\r\n  ],\r\n  exports: [\r\n    SdModal,\r\n    SdModalHeader,\r\n    SdModalBody,\r\n    SdModalFooter,\r\n    SdBottomSheet,\r\n    SdBottomSheetHeader,\r\n    SdBottomSheetBody,\r\n    SdBottomSheetFooter\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdModalModule {\r\n\r\n}\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/modal/modal.component';\r\nexport * from './lib/modal/modal-header/modal-header.component';\r\nexport * from './lib/modal/modal-body/modal-body.component';\r\nexport * from './lib/modal/modal-footer/modal-footer.component';\r\n\r\nexport * from './lib/bottom-sheet/bottom-sheet.component';\r\nexport * from './lib/bottom-sheet/bottom-sheet-header/bottom-sheet-header.component';\r\nexport * from './lib/bottom-sheet/bottom-sheet-body/bottom-sheet-body.component';\r\nexport * from './lib/bottom-sheet/bottom-sheet-footer/bottom-sheet-footer.component';\r\n\r\nexport * from './lib/modal.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAca,OAAO;IAkBlB,YACU,GAAsB,EACtB,MAAiB,EACjB,WAA2B,EACnC,aAAoC;QAH5B,QAAG,GAAH,GAAG,CAAmB;QACtB,WAAM,GAAN,MAAM,CAAW;QACjB,gBAAW,GAAX,WAAW,CAAgB;QAd5B,WAAM,GAAG,MAAM,CAAC;QAEhB,oBAAe,GAAG,IAAI,CAAC;QAGhC,aAAQ,GAAG,KAAK,CAAC;QACjB,kBAAa,GAAG,KAAK,CAAC;QACtB,qBAAgB,GAAG,KAAK,CAAC;QAGjB,gBAAW,GAAG,IAAI,YAAY,EAAE,CAAC;QA8BzC,SAAI,GAAG;YACL,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;gBACxE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC9D,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC;oBAClE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACvB,CAAC,CAAC,CAAC;aACL;iBAAM;gBACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;oBAClD,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,QAAQ,EAAE,IAAI,CAAC,KAAK;oBACpB,YAAY,EAAE,CAAC,IAAI,CAAC,iBAAiB;iBACtC,CAAC,CAAC;gBACH,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC;oBAC1D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACvB,CAAC,CAAC,CAAC;aACL;SACF,CAAA;QAED,UAAK,GAAG;;YACN,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;YACxB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,GAAG;YAC/B,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,GAAG;SACzB,CAAA;QApDC,IAAI,CAAC,gBAAgB,GAAG,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;KACpD;IACD,QAAQ;QACN,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;QACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,QAAQ,IAAI,CAAC,KAAK;gBAChB,KAAK,IAAI;oBACP,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;oBACpB,MAAM;gBACR,KAAK,IAAI;oBACP,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;oBACpB,MAAM;gBACR,KAAK,IAAI;oBACP,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;oBACpB,MAAM;aACT;SACF;KACF;IAED,WAAW;;QACT,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,GAAG;KACjC;;AA5CM,aAAK,GAAG,CAAC,CAAC;;YARlB,SAAS,SAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,+iBAAqC;gBAErC,aAAa,EAAE,iBAAiB,CAAC,IAAI;gBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;YAb6H,iBAAiB;YACtI,SAAS;YAET,cAAc;YADd,qBAAqB;;;0BAc3B,SAAS,SAAC,aAAa;oBACvB,KAAK;sBACL,KAAK;mBACL,KAAK;oBACL,KAAK;qBACL,KAAK;mBACL,KAAK;8BACL,KAAK;gCACL,KAAK;oBACL,SAAS,SAAC,OAAO;;;MCfP,aAAa;IAExB,YAAY,aAAoC;QADhD,qBAAgB,GAAG,KAAK,CAAC;QAEvB,IAAI,CAAC,gBAAgB,GAAG,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;KACpD;IAED,QAAQ;KACP;;;YAdF,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;gBAC3B,sXAA4C;gBAG5C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aACtC;;;YARQ,qBAAqB;;;MCOjB,WAAW;IAGtB,YAAY,aAAoC;QAFvC,WAAM,GAAG,MAAM,CAAC;QACzB,qBAAgB,GAAG,KAAK,CAAC;QAEvB,IAAI,CAAC,gBAAgB,GAAG,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;KACpD;IACD,QAAQ;KACP;;;YAZF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,sbAA0C;;aAE3C;;;YANQ,qBAAqB;;;qBAQ3B,KAAK;;;MCDK,aAAa;IAExB,YAAY,aAAoC;QADhD,qBAAgB,GAAG,KAAK,CAAC;QAEvB,IAAI,CAAC,gBAAgB,GAAG,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;KACpD;IAED,QAAQ;KACP;;;YAZF,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;gBAC3B,ggBAA4C;;aAE7C;;;YANQ,qBAAqB;;;MCMjB,aAAa;IAIxB,YACU,WAA2B;QAA3B,gBAAW,GAAX,WAAW,CAAgB;QAFrC,aAAQ,GAAG,KAAK,CAAC;QAKjB,SAAI,GAAG;YACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACzC,CAAA;QAED,UAAK,GAAG;YACN,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;SAC5B,CAAA;KATI;;;YAVN,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;gBAC3B,uOAA4C;aAC7C;;;YALQ,cAAc;;;0BAOpB,SAAS,SAAC,aAAa;oBACvB,KAAK;;;MCHK,mBAAmB;IAC9B,iBAAiB;IAEjB,QAAQ;KACP;;;YARF,SAAS,SAAC;gBACT,QAAQ,EAAE,wBAAwB;gBAClC,8EAAmD;aACpD;;;;MCCY,iBAAiB;IAE5B;QADS,WAAM,GAAG,MAAM,CAAC;KACR;IAEjB,QAAQ;KACP;;;YATF,SAAS,SAAC;gBACT,QAAQ,EAAE,sBAAsB;gBAChC,0FAAiD;aAClD;;;;qBAEE,KAAK;;;MCAK,mBAAmB;IAC9B,iBAAiB;IAEjB,QAAQ;KACP;;;YATF,SAAS,SAAC;gBACT,QAAQ,EAAE,wBAAwB;gBAClC,2KAAmD;;aAEpD;;;;MC2CY,aAAa;;;YAhCzB,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,oBAAoB;oBACpB,eAAe;oBACf,eAAe;oBACf,cAAc;iBACf;gBACD,YAAY,EAAE;oBACZ,OAAO;oBACP,aAAa;oBACb,WAAW;oBACX,aAAa;oBACb,aAAa;oBACb,mBAAmB;oBACnB,iBAAiB;oBACjB,mBAAmB;iBACpB;gBACD,OAAO,EAAE;oBACP,OAAO;oBACP,aAAa;oBACb,WAAW;oBACX,aAAa;oBACb,aAAa;oBACb,mBAAmB;oBACnB,iBAAiB;oBACjB,mBAAmB;iBACpB;gBACD,SAAS,EAAE,EACV;aACF;;;AChDD;;;;ACAA;;;;;;"}
+{"version":3,"file":"sd-angular-core-modal.js","sources":["../../../../projects/sd-core/modal/src/lib/modal/modal.component.ts","../../../../projects/sd-core/modal/src/lib/modal/modal-header/modal-header.component.ts","../../../../projects/sd-core/modal/src/lib/modal/modal-body/modal-body.component.ts","../../../../projects/sd-core/modal/src/lib/modal/modal-footer/modal-footer.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet-header/bottom-sheet-header.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet-body/bottom-sheet-body.component.ts","../../../../projects/sd-core/modal/src/lib/bottom-sheet/bottom-sheet-footer/bottom-sheet-footer.component.ts","../../../../projects/sd-core/modal/src/lib/modal.module.ts","../../../../projects/sd-core/modal/src/public-api.ts","../../../../projects/sd-core/modal/sd-angular-core-modal.ts"],"sourcesContent":["import { Component, ElementRef, Input, ViewChild, OnInit, OnDestroy, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\r\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatBottomSheet } from '@angular/material/bottom-sheet';\r\nimport { MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\nimport { Subscription } from 'rxjs';\r\n\r\n@Component({\r\n  selector: 'sd-modal',\r\n  templateUrl: './modal.component.html',\r\n  styleUrls: ['./modal.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdModal implements OnInit, OnDestroy {\r\n  static index = 0;\r\n  @ViewChild('templateRef') templateRef: TemplateRef<any>;\r\n  @Input() title: string;\r\n  @Input() noClose: boolean;\r\n  @Input() type: 'primary' | 'info' | 'success' | 'warning' | 'danger';\r\n  @Input() width: 'lg' | 'md' | 'sm' | string;\r\n  @Input() height = 'auto';\r\n  @Input() view: 'dialog' | 'bottomSheet';\r\n  @Input() lazyLoadContent = true;\r\n  @Input() closeClickOutSide: boolean;\r\n  @ViewChild('modal') modal: ElementRef;\r\n  isOpened = false;\r\n  alreadyOpened = false;\r\n  isMobileOrTablet = false;\r\n  private bottomSheetRef: MatBottomSheetRef<any>;\r\n  private dialogRef: MatDialogRef<any>;\r\n  private subcription = new Subscription();\r\n  constructor(\r\n    private ref: ChangeDetectorRef,\r\n    private dialog: MatDialog,\r\n    private bottomSheet: MatBottomSheet,\r\n    deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n  ngOnInit(): void {\r\n    this.type = this.type || 'primary';\r\n    this.width = this.width || '80vw';\r\n    if (!this.isMobileOrTablet) {\r\n      switch (this.width) {\r\n        case 'lg':\r\n          this.width = '80vw';\r\n          break;\r\n        case 'md':\r\n          this.width = '60vw';\r\n          break;\r\n        case 'sm':\r\n          this.width = '40vw';\r\n          break;\r\n      }\r\n    }\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.subcription?.unsubscribe();\r\n  }\r\n\r\n  open = (): void => {\r\n    if (this.isOpened) {\r\n      return;\r\n    }\r\n    this.ref.markForCheck();\r\n    this.alreadyOpened = true;\r\n    this.isOpened = true;\r\n    if ((!this.view && this.isMobileOrTablet) || this.view === 'bottomSheet') {\r\n      this.bottomSheetRef = this.bottomSheet.open(this.templateRef);\r\n      this.subcription.add(this.bottomSheetRef.afterDismissed().subscribe(() => {\r\n        this.isOpened = false;\r\n      }));\r\n    } else {\r\n      this.dialogRef = this.dialog.open(this.templateRef, {\r\n        width: this.width,\r\n        maxWidth: this.width,\r\n        disableClose: !this.closeClickOutSide // mặc định ko cho đóng modal khi click out side\r\n      });\r\n      this.subcription.add(this.dialogRef.afterClosed().subscribe(() => {\r\n        this.isOpened = false;\r\n      }));\r\n    }\r\n  }\r\n\r\n  close = (): void => {\r\n    this.ref.markForCheck();\r\n    this.bottomSheetRef?.dismiss();\r\n    this.dialogRef?.close();\r\n  }\r\n}\r\n","import { Component, OnInit, ViewEncapsulation } from '@angular/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\n\r\n@Component({\r\n  selector: 'sd-modal-header',\r\n  templateUrl: './modal-header.component.html',\r\n  styleUrls: [\r\n    './modal-header.component.scss'],\r\n  encapsulation: ViewEncapsulation.None\r\n})\r\nexport class SdModalHeader implements OnInit {\r\n  isMobileOrTablet = false;\r\n  constructor(deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\n\r\n@Component({\r\n  selector: 'sd-modal-body',\r\n  templateUrl: './modal-body.component.html',\r\n  styleUrls: ['./modal-body.component.scss'],\r\n})\r\nexport class SdModalBody implements OnInit {\r\n  @Input() height = 'auto';\r\n  isMobileOrTablet = false;\r\n  constructor(deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { Component, OnInit, ViewEncapsulation } from '@angular/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\n\r\n@Component({\r\n  selector: 'sd-modal-footer',\r\n  templateUrl: './modal-footer.component.html',\r\n  styleUrls: ['./modal-footer.component.scss']\r\n})\r\nexport class SdModalFooter implements OnInit {\r\n  isMobileOrTablet = false;\r\n  constructor(deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n}\r\n","import { Component, ViewChild, TemplateRef, Input } from '@angular/core';\r\nimport { MatBottomSheet } from '@angular/material/bottom-sheet';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet',\r\n  templateUrl: './bottom-sheet.component.html'\r\n})\r\nexport class SdBottomSheet {\r\n  @ViewChild('templateRef') templateRef: TemplateRef<OptionTemplateContext>;\r\n  @Input() title: string;\r\n  isOpened = false;\r\n  constructor(\r\n    private bottomSheet: MatBottomSheet,\r\n  ) { }\r\n\r\n  open = () => {\r\n    this.isOpened = true;\r\n    this.bottomSheet.open(this.templateRef);\r\n  }\r\n\r\n  close = () => {\r\n    this.bottomSheet.dismiss();\r\n  }\r\n}\r\n\r\ninterface OptionTemplateContext {\r\n  $implicit: any;\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet-header',\r\n  templateUrl: './bottom-sheet-header.component.html'\r\n})\r\nexport class SdBottomSheetHeader implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet-body',\r\n  templateUrl: './bottom-sheet-body.component.html'\r\n})\r\nexport class SdBottomSheetBody implements OnInit {\r\n  @Input() height = 'auto';\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-bottom-sheet-footer',\r\n  templateUrl: './bottom-sheet-footer.component.html',\r\n  styleUrls: ['./bottom-sheet-footer.component.scss']\r\n})\r\nexport class SdBottomSheetFooter implements OnInit {\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdModal } from './modal/modal.component';\r\nimport { SdModalHeader } from './modal/modal-header/modal-header.component';\r\nimport { SdModalBody } from './modal/modal-body/modal-body.component';\r\nimport { SdModalFooter } from './modal/modal-footer/modal-footer.component';\r\nimport { SdBottomSheet } from './bottom-sheet/bottom-sheet.component';\r\nimport { SdBottomSheetHeader } from './bottom-sheet/bottom-sheet-header/bottom-sheet-header.component';\r\nimport { SdBottomSheetBody } from './bottom-sheet/bottom-sheet-body/bottom-sheet-body.component';\r\nimport { SdBottomSheetFooter } from './bottom-sheet/bottom-sheet-footer/bottom-sheet-footer.component';\r\n\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatBottomSheetModule } from '@angular/material/bottom-sheet';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { SdButtonModule } from '@sd-angular/core/button';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    MatBottomSheetModule,\r\n    MatDialogModule,\r\n    MatButtonModule,\r\n    SdButtonModule\r\n  ],\r\n  declarations: [\r\n    SdModal,\r\n    SdModalHeader,\r\n    SdModalBody,\r\n    SdModalFooter,\r\n    SdBottomSheet,\r\n    SdBottomSheetHeader,\r\n    SdBottomSheetBody,\r\n    SdBottomSheetFooter\r\n  ],\r\n  exports: [\r\n    SdModal,\r\n    SdModalHeader,\r\n    SdModalBody,\r\n    SdModalFooter,\r\n    SdBottomSheet,\r\n    SdBottomSheetHeader,\r\n    SdBottomSheetBody,\r\n    SdBottomSheetFooter\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdModalModule {\r\n\r\n}\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/modal/modal.component';\r\nexport * from './lib/modal/modal-header/modal-header.component';\r\nexport * from './lib/modal/modal-body/modal-body.component';\r\nexport * from './lib/modal/modal-footer/modal-footer.component';\r\n\r\nexport * from './lib/bottom-sheet/bottom-sheet.component';\r\nexport * from './lib/bottom-sheet/bottom-sheet-header/bottom-sheet-header.component';\r\nexport * from './lib/bottom-sheet/bottom-sheet-body/bottom-sheet-body.component';\r\nexport * from './lib/bottom-sheet/bottom-sheet-footer/bottom-sheet-footer.component';\r\n\r\nexport * from './lib/modal.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/sd-angular-core-select-editor.js

@@ -51,7 +51,7 @@ SdSelectEditor.decorators = [
                 selector: "sd-select-editor",
                 template: "<label *ngIf=\"!appearance && label && !sdLabelDef?.templateRef\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n  *ngIf=\"isRequired\">*</span></label>\r\n<ng-container *ngIf=\"sdLabelDef?.templateRef\" matSuffix>\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\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 != null)}\"\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\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; 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 != null}\" [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 != null) && !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}.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}"]
+                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}.sd__option--add ::ng-deep mat-pseudo-checkbox{display:none}"]
             },] }
 ];
 SdSelectEditor.ctorParameters = () => [