@sd-angular/core 1.2.20 → 1.2.23

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

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

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

@@ -2,7 +2,7 @@ import { EventEmitter, ChangeDetectorRef, OnDestroy, AfterViewInit, ElementRef,
 import { NgForm, FormGroup } from '@angular/forms';
 import { SdInputSuffixDirective } from './directives/input-suffix.directive';
 import { SdFormControl } from '@sd-angular/core/common';
-import { SdViewDefDirective } from '@sd-angular/core/common';
+import { SdViewDefDirective, SdLableDefDirective } from '@sd-angular/core/common';
 import { SdUtilityService } from '@sd-angular/core/utility';
 import { IFormConfiguration } from '@sd-angular/core/common';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
@@ -48,6 +48,7 @@ export declare class SdInput implements OnDestroy, OnInit, AfterViewInit {
     keyupEnter: EventEmitter<any>;
     control: ElementRef;
     sdInputSuffix: SdInputSuffixDirective;
+    sdLableDef: SdLableDefDirective;
     formControl: SdFormControl;
     sdView: SdViewDefDirective;
     isFocused: boolean;

package/package.json

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

package/select-badge/index.d.ts

@@ -0,0 +1 @@
+export * from './src/public-api';

package/select-badge/package.json

@@ -0,0 +1,12 @@
+{
+  "peerDependencies": {},
+  "main": "../bundles/sd-angular-core-select-badge.umd.js",
+  "module": "../fesm2015/sd-angular-core-select-badge.js",
+  "es2015": "../fesm2015/sd-angular-core-select-badge.js",
+  "esm2015": "../esm2015/select-badge/sd-angular-core-select-badge.js",
+  "fesm2015": "../fesm2015/sd-angular-core-select-badge.js",
+  "typings": "sd-angular-core-select-badge.d.ts",
+  "metadata": "sd-angular-core-select-badge.metadata.json",
+  "sideEffects": false,
+  "name": "@sd-angular/core/select-badge"
+}

package/select-badge/sd-angular-core-select-badge.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

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

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"SdSelectBadgeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":26,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":27,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":28,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdSelectBadge"},{"__symbolic":"reference","name":"SdSelectBadgeDisplayDefDirective"}],"exports":[{"__symbolic":"reference","name":"SdSelectBadge"},{"__symbolic":"reference","name":"SdSelectBadgeDisplayDefDirective"},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":37,"character":4}],"providers":[]}]}],"members":{}},"SdSelectBadge":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sd-select-badge","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":19},"member":"OnPush"},"template":"<label *ngIf=\"label\" class=\"d-block mb-6 T14M\">{{label}}</label>\r\n<div #selectbadge class=\"c-selectbadge-dropdown\" (click)=\"onToogle()\">\r\n  <div class=\"c-selectbadge-dropdown__label\">\r\n    <div class=\"media align-items-center\">\r\n      <div class=\"media-body d-flex align-items-center\">\r\n        <ng-container *ngIf=\"selectedItem\">\r\n          <span class=\"c-selectbadge-icon c-badge mr-6\" [ngClass]=\"{\r\n            'material-icons-outlined': !selectedItem[iconColorField],\r\n            'material-icons-round': selectedItem[iconColorField],\r\n            'c-primary': selectedItem[iconColorField] === 'primary', \r\n            'c-black400': selectedItem[iconColorField] === 'normal', \r\n            'c-info': selectedItem[iconColorField] === 'info', \r\n            'c-success': selectedItem[iconColorField] === 'success', \r\n            'c-danger': selectedItem[iconColorField] === 'danger', \r\n            'c-warning': selectedItem[iconColorField] === 'warning'\r\n          }\">\r\n            {{selectedItem[iconField]}}\r\n          </span>\r\n          <span>{{selectedItem[displayField]}}</span>\r\n        </ng-container>\r\n      </div>\r\n      <span class=\"material-icons-outlined ml-6\">\r\n        arrow_drop_down\r\n      </span>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"c-selectbadge-dropdown__content\" [ngClass]=\"isShowContent ? '' : 'd-none'\">\r\n    <div class=\"c-selectbadge-item media align-items-center py-12\" *ngFor=\"let item of items\"\r\n      (click)=\"onSelected(item)\">\r\n      <span class=\"c-selectbadge-icon c-badge\" [ngClass]=\"{\r\n        'material-icons-outlined': !item[iconColorField],\r\n        'material-icons-round': item[iconColorField],\r\n        'c-primary': item[iconColorField] === 'primary', \r\n        'c-black400': item[iconColorField] === 'normal', \r\n        'c-info': item[iconColorField] === 'info', \r\n        'c-success': item[iconColorField] === 'success', \r\n        'c-danger': item[iconColorField] === 'danger', \r\n        'c-warning': item[iconColorField] === 'warning'\r\n      }\">\r\n        <ng-container *ngIf=\"item[iconField]\">\r\n          {{item[iconField]}}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item[iconField]\">\r\n          fiber_manual_record\r\n        </ng-container>\r\n      </span>\r\n\r\n      <div class=\"media-body ml-12\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"mr-16\">\r\n            <div class=\"c-selectbadge-item__title\">{{item[displayField]}}</div>\r\n            <div class=\"c-selectbadge-item__desc\">{{item[descriptionField]}}</div>\r\n          </div>\r\n          <span *ngIf=\"selectedItem && item[valueField] === selectedItem[valueField]\"\r\n            class=\"material-icons-outlined c-selectbadge-icon__checked\">check</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>","styles":[".text-black400{color:#757575}.c-selectbadge-dropdown{color:#5f6368;cursor:pointer;display:inline-flex;position:relative}.c-selectbadge-dropdown__label{border:1px solid #dadce0;border-radius:18px;font-weight:500;height:36px;min-width:110px;padding:4px 8px}.c-selectbadge-dropdown__label:hover{background-color:rgba(32,33,36,.059)}.c-selectbadge-dropdown__label:active{background:rgba(32,33,36,.122)}.c-selectbadge-dropdown .c-selectbadge-icon{display:inline-block;font-size:18px}.c-selectbadge-dropdown .c-selectbadge-icon__checked{color:rgba(0,0,0,.5);font-size:16px}.c-selectbadge-dropdown .c-selectbadge-icon.c-primary{color:#2962ff}.c-selectbadge-dropdown .c-selectbadge-icon.c-black400{color:#757575}.c-selectbadge-dropdown .c-selectbadge-icon.c-info{color:#2962ff}.c-selectbadge-dropdown .c-selectbadge-icon.c-warning{color:#ff9600}.c-selectbadge-dropdown .c-selectbadge-icon.c-success{color:#4caf50}.c-selectbadge-dropdown .c-selectbadge-icon.c-danger{color:#f82c13}.c-selectbadge-dropdown__content{background-color:#fff;border-radius:3px;box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);display:block;left:0;min-width:160px;min-width:256px;padding:12px 0;position:absolute;top:36px;z-index:9}.c-selectbadge-dropdown__content .c-selectbadge-item{padding:16px 12px}.c-selectbadge-dropdown__content .c-selectbadge-item:hover{background-color:#eee;outline:1px dashed transparent}.c-selectbadge-dropdown__content .c-selectbadge-item__desc{color:rgba(0,0,0,.5);font-size:12px}"]}]}],"members":{"selectbadge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":10,"character":3},"arguments":["selectbadge"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"_items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3},"arguments":["items"]}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"displayField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"iconField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"iconColorField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"descriptionField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"sdSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":46,"character":3},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":52,"character":17}]}],"ngOnInit":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}]}},"SdSelectBadgeDisplayDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdSelectBadgeDisplayDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}},"origins":{"SdSelectBadgeModule":"./src/lib/select-badge.module","SdSelectBadge":"./src/lib/select-badge.component","SdSelectBadgeDisplayDefDirective":"./src/lib/select-badge-display-def.directive"},"importAs":"@sd-angular/core/select-badge"}

package/select-badge/src/lib/select-badge-display-def.directive.d.ts

@@ -0,0 +1,5 @@
+import { TemplateRef } from '@angular/core';
+export declare class SdSelectBadgeDisplayDefDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+}

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

@@ -0,0 +1,32 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
+export declare class SdSelectBadge {
+    #private;
+    private ref;
+    selectbadge: ElementRef<HTMLDivElement>;
+    selectedItem: any;
+    label: string;
+    placeholder: string;
+    value: string;
+    set model(val: any);
+    items: any[];
+    set _items(items: any[]);
+    valueField: string;
+    displayField: string;
+    iconField: string;
+    iconColorField: string;
+    descriptionField: string;
+    modelChange: EventEmitter<any>;
+    sdChange: EventEmitter<any>;
+    sdSelection: EventEmitter<{
+        value: any | any[];
+        item?: any;
+        items?: any[];
+    }>;
+    isShowContent: boolean;
+    clickout(event: any): void;
+    constructor(ref: ChangeDetectorRef);
+    ngOnInit(): void;
+    onToogle: () => void;
+    onModelChange: (val: any) => void;
+    onSelected(item?: any): void;
+}

package/select-badge/src/lib/select-badge.module.d.ts

@@ -0,0 +1,2 @@
+export declare class SdSelectBadgeModule {
+}

package/select-badge/src/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/select-badge.module';
+export * from './lib/select-badge.component';
+export * from './lib/select-badge-display-def.directive';

package/upload-excel/sd-angular-core-upload-excel.d.ts

@@ -2,3 +2,5 @@
  * Generated bundle index. Do not edit.
  */
 export * from './index';
+export { SdColumnHiddenPipe as ɵa } from './src/lib/pipes/columm-hidden.pipe';
+export { SdColumnTransformPipe as ɵb } from './src/lib/pipes/column-transform.pipe';

package/upload-excel/sd-angular-core-upload-excel.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdUploadExcelOption":{"__symbolic":"interface"},"SdUploadExcelColumn":{"__symbolic":"interface"},"SdUploadExcelBaseColumn":{"__symbolic":"interface"},"SdUploadExcelColumnString":{"__symbolic":"interface"},"SdUploadExcelColumnNumber":{"__symbolic":"interface"},"SdUploadExcelColumnBool":{"__symbolic":"interface"},"SdUploadExcelColumnDate":{"__symbolic":"interface"},"SdUploadExcelColumnTime":{"__symbolic":"interface"},"SdUploadExcelColumnDateTime":{"__symbolic":"interface"},"SdUploadExcelColumnValues":{"__symbolic":"interface"},"SdUploadExcelColumnStringArray":{"__symbolic":"interface"},"SdUploadExcelValidation":{"__symbolic":"interface"},"ExcelItem":{"__symbolic":"interface"},"SdUploadExcel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"sd-upload-excel","template":"<sd-modal [title]=\"(option?.title || 'Import Excel')| sdTranslate\" #modal>\r\n  <sd-modal-body background=\"#F0F8FF\">\r\n    <div class=\"row mx-0 mb-10\">\r\n      <sd-button *ngIf=\"items?.length\" class=\"mr-5\" (action)=\"view('ALL')\" icon=\"cached\"\r\n        [title]=\"'View all' | sdTranslate\" size=\"sm\"></sd-button>\r\n      <sd-button *ngIf=\"numberOfSuccess\" class=\"mr-5\" (action)=\"view('SUCCESS')\" icon=\"done\" [title]=\"numberOfSuccess\"\r\n        [tooltip]=\"'Number of success rows' | sdTranslate\" size=\"sm\" color=\"success\"></sd-button>\r\n      <sd-button *ngIf=\"numberOfWarning\" class=\"mr-5\" (action)=\"view('WARNING')\" icon=\"warning\"\r\n        [title]=\"numberOfWarning\" [tooltip]=\"'Number of warning rows' | sdTranslate\" size=\"sm\"></sd-button>\r\n      <sd-button *ngIf=\"numberOfError\" class=\"mr-5\" (action)=\"view('ERROR')\" icon=\"error\" [title]=\"numberOfError\"\r\n        color=\"danger\" [tooltip]=\"'Number of error rows' | sdTranslate\" size=\"sm\"></sd-button>\r\n    </div>\r\n    <div class=\"sd-box\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\" style=\"position: relative; height:50vh\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center position-sticky c-sticky-left\" style=\"width: 50px\">#</th>\r\n                <th *ngIf=\"filteredItems?.length\" class=\"text-center\" style=\"min-width: 250px; width: 250px\">\r\n                  {{'Upload message' | sdTranslate}}</th>\r\n                <th *ngFor=\"let column of option.columns\"\r\n                  [ngStyle]=\"{'min-width':column.width ? column.width : '300px'}\" [matTooltip]=\"column.title\">\r\n                  <span class=\"c-ellipsis\"\r\n                    [ngStyle]=\"{'min-width':column.width ? column.width : '300px', 'max-width':column.width ? column.width : '300px'}\">{{column.title}}</span>\r\n                </th>\r\n              </tr>\r\n            </thead>\r\n            <tbody *ngIf=\"viewItems.length\">\r\n              <tr *ngFor=\"let item of viewItems\">\r\n                <td class=\"text-center position-sticky c-sticky-left\" style=\"width: 50px\">\r\n                  <span class=\"badge\"\r\n                    [ngClass]=\"{'badge-success':!item.validation?.warning && !item.validation?.error, 'badge-warning':item.validation?.warning && !item.validation?.error, 'badge-danger':item.validation?.error}\"\r\n                    style=\"width: 100%\">{{item.excelIndex}}</span>\r\n                </td>\r\n                <td style=\"min-width: 250px; width: 250px\">\r\n                  <div\r\n                    [innerHtml]=\"item.validation?.error || item.validation?.warning || item.validation?.success || ('Success' | sdTranslate)\">\r\n                  </div>\r\n                </td>\r\n                <td *ngFor=\"let column of option.columns\" class=\"align-middle\"\r\n                  [ngClass]=\"{'table-warning':item.validation?.data[column.field]?.warning && !item.validation?.data[column.field]?.error, 'table-danger':item.validation?.data[column.field]?.error}\"\r\n                  [matTooltip]=\"item.validation?.data[column.field]?.error || item.validation?.data[column.field]?.warning\"\r\n                  [ngStyle]=\"{'min-width':column.width ? column.width : '300px'}\" matTooltipPosition=\"above\">\r\n                  <span class=\"c-ellipsis\">\r\n                    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' && item.origin\">\r\n                      {{item.origin[column.field]}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"column.type === 'number'\">\r\n                      {{item.validation?.data[column.field]?.error ? item[column.field] : (item[column.field] | number :\r\n                      '1.0-2')}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"column.type === 'array'\">\r\n                      {{item[column.field]?.split(column.divideString)?.length}} {{column.unitString}}\r\n                      <button mat-button [matMenuTriggerFor]=\"menu\" class=\"c-mat-menu\">\r\n                        <mat-icon>open_in_new</mat-icon>\r\n                      </button>\r\n                      <mat-menu #menu=\"matMenu\">\r\n                        <div class=\"row mx-0\">\r\n                          <div class=\"col-6\" *ngFor=\"let itemArray of item[column.field]?.split(column.divideString)\">\r\n                            {{itemArray}}\r\n                          </div>\r\n                        </div>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                    <ng-container\r\n                      *ngIf=\"column.type !== 'date' && column.type !== 'datetime' && column.type !== 'number' && column.type !== 'array'\">\r\n                      {{item[column.field]}}\r\n                    </ng-container>\r\n                  </span>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n      <div class=\"sd-box-footer clearfix\">\r\n        <div style=\"display: flex; align-items: center; align-content: space-between;\">\r\n          <div style=\"flex: 1;\" [innerHTML]=\"option?.note\">\r\n          </div>\r\n          <div style=\"flex: 1;\">\r\n            <mat-paginator [length]=\"filteredItems?.length || 0\" hidePageSize>\r\n            </mat-paginator>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <div class=\"mr-auto\">\r\n      <sd-button class=\"mr-5\" (action)=\"upload()\" icon=\"file_upload\" [title]=\"'Upload' | sdTranslate\" size=\"sm\"\r\n        color=\"info\"></sd-button>\r\n      <sd-button class=\"mr-5\" (action)=\"downloadTemplate()\" icon=\"file_download\" [loading]=\"isDownloadTemplate\"\r\n        [title]=\"'Download template' | sdTranslate\" color=\"info\" type=\"outline\" size=\"sm\">\r\n      </sd-button>\r\n    </div>\r\n    <sd-button *ngIf=\"filteredItems?.length\" class=\"mr-5\" (action)=\"export()\" icon=\"get_app\"\r\n      [title]=\"'Download result' | sdTranslate\" size=\"sm\" color=\"info\" type=\"outline\">\r\n    </sd-button>\r\n    <sd-button (action)=\"accept()\" [title]=\"'Accept' | sdTranslate\"\r\n      [disabled]=\"numberOfSuccess === 0 || numberOfError > 0 || isUploaded\" color=\"primary\" type=\"fill\" size=\"sm\">\r\n    </sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"upload()\" icon=\"file_upload\"\r\n      [title]=\"'Upload' | sdTranslate\" width=\"100%\" size=\"sm\" color=\"info\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"accept()\" icon=\"check\" [title]=\"'Accept' | sdTranslate\"\r\n      [disabled]=\"numberOfSuccess === 0 || numberOfError > 0\" color=\"success\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>","styles":[".table thead td,.table thead th{padding-bottom:5px;padding-top:5px}.table-striped tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.c-sticky-left{border-left:none!important;border-right:none!important;left:0!important;z-index:20}.c-ellipsis{display:block;overflow:hidden!important;padding:.1rem;text-overflow:ellipsis;white-space:nowrap}.c-mat-menu{border:none}.c-mat-menu mat-icon{font-size:20px;vertical-align:middle}:host ::ng-deep .mat-paginator-container{height:32px;min-height:32px}:host ::ng-deep .mat-paginator-container .mat-icon-button{height:28px;line-height:28px;width:28px}"]}]}],"members":{"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":3},"arguments":["modal"]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":48,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":59,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/export","name":"SdExportService","line":60,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":61,"character":30},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":62,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":63,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SdUploadExcelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorModule","line":21,"character":4},"member":"forRoot"}},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":25,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyModule","line":26,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":27,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/button","name":"SdButtonModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/modal","name":"SdModalModule","line":30,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/input","name":"SdInputModule","line":31,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":32,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":33,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdUploadExcel"}],"exports":[{"__symbolic":"reference","name":"SdUploadExcel"}],"providers":[]}]}],"members":{}}},"origins":{"SdUploadExcelOption":"./src/lib/upload-excel.model","SdUploadExcelColumn":"./src/lib/upload-excel.model","SdUploadExcelBaseColumn":"./src/lib/upload-excel.model","SdUploadExcelColumnString":"./src/lib/upload-excel.model","SdUploadExcelColumnNumber":"./src/lib/upload-excel.model","SdUploadExcelColumnBool":"./src/lib/upload-excel.model","SdUploadExcelColumnDate":"./src/lib/upload-excel.model","SdUploadExcelColumnTime":"./src/lib/upload-excel.model","SdUploadExcelColumnDateTime":"./src/lib/upload-excel.model","SdUploadExcelColumnValues":"./src/lib/upload-excel.model","SdUploadExcelColumnStringArray":"./src/lib/upload-excel.model","SdUploadExcelValidation":"./src/lib/upload-excel.model","ExcelItem":"./src/lib/upload-excel.model","SdUploadExcel":"./src/lib/upload-excel.component","SdUploadExcelModule":"./src/lib/upload-excel.module"},"importAs":"@sd-angular/core/upload-excel"}
+{"__symbolic":"module","version":4,"metadata":{"SdUploadExcelOption":{"__symbolic":"interface"},"SdUploadExcelColumn":{"__symbolic":"interface"},"SdUploadExcelBaseColumn":{"__symbolic":"interface"},"SdUploadExcelColumnString":{"__symbolic":"interface"},"SdUploadExcelColumnNumber":{"__symbolic":"interface"},"SdUploadExcelColumnBool":{"__symbolic":"interface"},"SdUploadExcelColumnDate":{"__symbolic":"interface"},"SdUploadExcelColumnTime":{"__symbolic":"interface"},"SdUploadExcelColumnDateTime":{"__symbolic":"interface"},"SdUploadExcelColumnValues":{"__symbolic":"interface"},"SdUploadExcelColumnStringArray":{"__symbolic":"interface"},"SdUploadExcelValidation":{"__symbolic":"interface"},"ExcelItem":{"__symbolic":"interface"},"SdUploadExcel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"sd-upload-excel","template":"<sd-modal [title]=\"(option?.title || 'Import Excel')| sdTranslate\" #modal>\r\n  <sd-modal-body background=\"#F0F8FF\">\r\n    <div class=\"row mx-0 mb-10\">\r\n      <sd-button *ngIf=\"items?.length\" class=\"mr-5\" (action)=\"view('ALL')\" icon=\"cached\"\r\n        [title]=\"'View all' | sdTranslate\" size=\"sm\"></sd-button>\r\n      <sd-button *ngIf=\"numberOfSuccess\" class=\"mr-5\" (action)=\"view('SUCCESS')\" icon=\"done\" [title]=\"numberOfSuccess\"\r\n        [tooltip]=\"'Number of success rows' | sdTranslate\" size=\"sm\" color=\"success\"></sd-button>\r\n      <sd-button *ngIf=\"numberOfWarning\" class=\"mr-5\" (action)=\"view('WARNING')\" icon=\"warning\"\r\n        [title]=\"numberOfWarning\" [tooltip]=\"'Number of warning rows' | sdTranslate\" size=\"sm\"></sd-button>\r\n      <sd-button *ngIf=\"numberOfError\" class=\"mr-5\" (action)=\"view('ERROR')\" icon=\"error\" [title]=\"numberOfError\"\r\n        color=\"danger\" [tooltip]=\"'Number of error rows' | sdTranslate\" size=\"sm\"></sd-button>\r\n    </div>\r\n    <div class=\"sd-box\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\" style=\"position: relative; height:50vh\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center position-sticky c-sticky-left\" style=\"width: 50px\">#</th>\r\n                <th *ngIf=\"filteredItems?.length\" class=\"text-center\" style=\"min-width: 250px; width: 250px\">\r\n                  {{'Upload message' | sdTranslate}}</th>\r\n                <ng-container *ngFor=\"let column of option.columns\">\r\n                  <th *ngIf=\"column | columnHidden\"\r\n                    [ngStyle]=\"{'min-width':column.width ? column.width : '300px'}\" [matTooltip]=\"column.title\">\r\n                    <span class=\"c-ellipsis\"\r\n                      [ngStyle]=\"{'min-width':column.width ? column.width : '300px', 'max-width':column.width ? column.width : '300px'}\">{{column.title}}</span>\r\n                  </th>\r\n                </ng-container>\r\n              </tr>\r\n            </thead>\r\n            <tbody *ngIf=\"viewItems.length\">\r\n              <tr *ngFor=\"let item of viewItems\">\r\n                <td class=\"text-center position-sticky c-sticky-left\" style=\"width: 50px\">\r\n                  <span class=\"badge\"\r\n                    [ngClass]=\"{'badge-success':!item.validation?.warning && !item.validation?.error, 'badge-warning':item.validation?.warning && !item.validation?.error, 'badge-danger':item.validation?.error}\"\r\n                    style=\"width: 100%\">{{item.excelIndex}}</span>\r\n                </td>\r\n                <td style=\"min-width: 250px; width: 250px\">\r\n                  <div\r\n                    [innerHtml]=\"item.validation?.error || item.validation?.warning || item.validation?.success || ('Success' | sdTranslate)\">\r\n                  </div>\r\n                </td>\r\n                <ng-container *ngFor=\"let column of option.columns\">\r\n                  <td *ngIf=\"column | columnHidden\" class=\"align-middle\"\r\n                    [ngClass]=\"{'table-warning':item.validation?.data[column.field]?.warning && !item.validation?.data[column.field]?.error, 'table-danger':item.validation?.data[column.field]?.error}\"\r\n                    [matTooltip]=\"item.validation?.data[column.field]?.error || item.validation?.data[column.field]?.warning\"\r\n                    [ngStyle]=\"{'min-width':column.width ? column.width : '300px'}\" matTooltipPosition=\"above\">\r\n                    <span class=\"c-ellipsis\">\r\n                      <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' && item.origin\">\r\n                        {{item.origin[column.field] | columnTransform:item:column | async}}\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"column.type === 'number'\">\r\n                        {{item.validation?.data[column.field]?.error ? (item[column.field] | columnTransform:item:column | async): (item[column.field] | number :\r\n                        '1.0-2')}}\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"column.type === 'array'\">\r\n                        {{item[column.field]?.split(column.divideString)?.length}} {{column.unitString}}\r\n                        <button mat-button [matMenuTriggerFor]=\"menu\" class=\"c-mat-menu\">\r\n                          <mat-icon>open_in_new</mat-icon>\r\n                        </button>\r\n                        <mat-menu #menu=\"matMenu\">\r\n                          <div class=\"row mx-0\">\r\n                            <div class=\"col-6\" *ngFor=\"let itemArray of item[column.field]?.split(column.divideString)\">\r\n                              {{itemArray | columnTransform:item:column | async}}\r\n                            </div>\r\n                          </div>\r\n                        </mat-menu>\r\n                      </ng-container>\r\n                      <ng-container\r\n                        *ngIf=\"column.type !== 'date' && column.type !== 'datetime' && column.type !== 'number' && column.type !== 'array'\">\r\n                        <!-- {{item[column.field]}} -->\r\n                        {{item[column.field] | columnTransform:item:column | async}}\r\n\r\n                      </ng-container>\r\n                    </span>\r\n                  </td>\r\n                </ng-container>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n      <div class=\"sd-box-footer clearfix\">\r\n        <div style=\"display: flex; align-items: center; align-content: space-between;\">\r\n          <div style=\"flex: 1;\" [innerHTML]=\"option?.note\">\r\n          </div>\r\n          <div style=\"flex: 1;\">\r\n            <mat-paginator [length]=\"filteredItems?.length || 0\" hidePageSize>\r\n            </mat-paginator>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <div class=\"mr-auto\">\r\n      <sd-button class=\"mr-5\" (action)=\"upload()\" icon=\"file_upload\" [title]=\"'Upload' | sdTranslate\" size=\"sm\"\r\n        color=\"info\"></sd-button>\r\n      <sd-button class=\"mr-5\" (action)=\"downloadTemplate()\" icon=\"file_download\" [loading]=\"isDownloadTemplate\"\r\n        [title]=\"'Download template' | sdTranslate\" color=\"info\" type=\"outline\" size=\"sm\">\r\n      </sd-button>\r\n    </div>\r\n    <sd-button *ngIf=\"filteredItems?.length\" class=\"mr-5\" (action)=\"export()\" icon=\"get_app\"\r\n      [title]=\"'Download result' | sdTranslate\" size=\"sm\" color=\"info\" type=\"outline\">\r\n    </sd-button>\r\n    <sd-button (action)=\"accept()\" [title]=\"'Accept' | sdTranslate\"\r\n      [disabled]=\"numberOfSuccess === 0 || numberOfError > 0 || isUploaded\" color=\"primary\" type=\"fill\" size=\"sm\">\r\n    </sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"upload()\" icon=\"file_upload\"\r\n      [title]=\"'Upload' | sdTranslate\" width=\"100%\" size=\"sm\" color=\"info\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"accept()\" icon=\"check\" [title]=\"'Accept' | sdTranslate\"\r\n      [disabled]=\"numberOfSuccess === 0 || numberOfError > 0\" color=\"success\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>","styles":[".table thead td,.table thead th{padding-bottom:5px;padding-top:5px}.table-striped tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.c-sticky-left{border-left:none!important;border-right:none!important;left:0!important;z-index:20}.c-ellipsis{display:block;overflow:hidden!important;padding:.1rem;text-overflow:ellipsis;white-space:nowrap}.c-mat-menu{border:none}.c-mat-menu mat-icon{font-size:20px;vertical-align:middle}:host ::ng-deep .mat-paginator-container{height:32px;min-height:32px}:host ::ng-deep .mat-paginator-container .mat-icon-button{height:28px;line-height:28px;width:28px}"]}]}],"members":{"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":3},"arguments":["modal"]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":49,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":60,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/export","name":"SdExportService","line":61,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":62,"character":30},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":63,"character":27},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":65,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SdUploadExcelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":18,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":21,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorModule","line":22,"character":4},"member":"forRoot"}},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":26,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyModule","line":27,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/button","name":"SdButtonModule","line":30,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/modal","name":"SdModalModule","line":31,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/input","name":"SdInputModule","line":32,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":34,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdUploadExcel"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"SdUploadExcel"}],"providers":[]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnHidden"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnTransform"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"SdUploadExcelOption":"./src/lib/upload-excel.model","SdUploadExcelColumn":"./src/lib/upload-excel.model","SdUploadExcelBaseColumn":"./src/lib/upload-excel.model","SdUploadExcelColumnString":"./src/lib/upload-excel.model","SdUploadExcelColumnNumber":"./src/lib/upload-excel.model","SdUploadExcelColumnBool":"./src/lib/upload-excel.model","SdUploadExcelColumnDate":"./src/lib/upload-excel.model","SdUploadExcelColumnTime":"./src/lib/upload-excel.model","SdUploadExcelColumnDateTime":"./src/lib/upload-excel.model","SdUploadExcelColumnValues":"./src/lib/upload-excel.model","SdUploadExcelColumnStringArray":"./src/lib/upload-excel.model","SdUploadExcelValidation":"./src/lib/upload-excel.model","ExcelItem":"./src/lib/upload-excel.model","SdUploadExcel":"./src/lib/upload-excel.component","SdUploadExcelModule":"./src/lib/upload-excel.module","ɵa":"./src/lib/pipes/columm-hidden.pipe","ɵb":"./src/lib/pipes/column-transform.pipe"},"importAs":"@sd-angular/core/upload-excel"}

package/upload-excel/src/lib/pipes/columm-hidden.pipe.d.ts

@@ -0,0 +1,6 @@
+import { PipeTransform } from '@angular/core';
+import { SdUploadExcelColumn } from '../upload-excel.model';
+export declare class SdColumnHiddenPipe implements PipeTransform {
+    constructor();
+    transform(column: SdUploadExcelColumn): boolean;
+}

package/upload-excel/src/lib/pipes/column-transform.pipe.d.ts

@@ -0,0 +1,5 @@
+import { PipeTransform } from '@angular/core';
+import { SdUploadExcelColumn } from '../upload-excel.model';
+export declare class SdColumnTransformPipe implements PipeTransform {
+    transform(value: any, rowData: any, column: SdUploadExcelColumn): Promise<string>;
+}

package/upload-excel/src/lib/upload-excel.component.d.ts

@@ -6,12 +6,14 @@ import { MatPaginator } from '@angular/material/paginator';
 import { SdModal } from '@sd-angular/core/modal';
 import { SdUploadExcelOption, SdUploadExcelValidation } from './upload-excel.model';
 import { SdExportService } from '@sd-angular/core/export';
+import { SdColumnHiddenPipe } from './pipes/columm-hidden.pipe';
 export declare class SdUploadExcel implements OnInit, OnDestroy {
     #private;
     private ref;
     private exportService;
     private translateService;
     private notifyService;
+    private sdColumnHidden;
     private loadingService;
     private importId;
     option: SdUploadExcelOption;
@@ -29,7 +31,7 @@ export declare class SdUploadExcel implements OnInit, OnDestroy {
     set paginator(paginator: MatPaginator);
     isUploaded: boolean;
     isDownloadTemplate: boolean;
-    constructor(ref: ChangeDetectorRef, exportService: SdExportService, translateService: SdTranslateService, notifyService: SdNotifyService, loadingService: SdLoadingService);
+    constructor(ref: ChangeDetectorRef, exportService: SdExportService, translateService: SdTranslateService, notifyService: SdNotifyService, sdColumnHidden: SdColumnHiddenPipe, loadingService: SdLoadingService);
     ngOnInit(): void;
     ngOnDestroy(): void;
     open: () => void;

package/upload-excel/src/lib/upload-excel.model.d.ts

@@ -26,7 +26,8 @@ export interface SdUploadExcelBaseColumn<T = any> {
     required?: boolean;
     width?: string;
     description?: string;
-    hidden?: boolean;
+    hidden?: boolean | (() => boolean);
+    transform?: (value: any, rowData: T) => string | Promise<string>;
     mappingDisplay?: (item?: T, value?: any) => string | Promise<string>;
     errorValidation?: (item?: T, value?: any) => string | Promise<string>;
     warningValidation?: (item?: T, value?: any) => string | Promise<string>;