@sd-angular/core
Version:
Sd Angular Core Lib
1 lines • 14.7 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"SdChipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":27,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":29,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdChip"},{"__symbolic":"reference","name":"SdChipDisplayDef"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":37,"character":4},{"__symbolic":"reference","name":"SdChip"},{"__symbolic":"reference","name":"SdChipDisplayDef"}]}]}],"members":{}},"SdChip":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"sd-chip","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":43,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"!appearance && sdLabelDef?.templateRef\">\r\n <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"!appearance && label && !sdLabelDef?.templateRef\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n *ngIf=\"required\">*</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 && !autocompleteTrigger?.panelOpen && !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=\"c-md\" [ngClass]=\"{'c-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-chip-list [formControl]=\"formControl\" #chipList>\r\n <ng-container *ngFor=\"let item of selectedItems | async\">\r\n <mat-chip *ngIf=\"item\" [selectable]=\"selectable\" [removable]=\"removable\" (removed)=\"onRemove(item)\"\r\n [selected]=\"item.isSelected\" (selectionChange)=\"select(item)\" [disabled]=\"inputControl.disabled\"\r\n (click)=\"onClickChip($event, item)\">\r\n <span>{{item[displayField] || item[valueField] || item}}</span>\r\n <mat-icon *ngIf=\"!inputControl.disabled && item | sdRemovableChip:removable\" matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </ng-container>\r\n <input #autocompleteTrigger [formControl]=\"inputControl\" [placeholder]=\"placeholder || (appearance ? label : '')\"\r\n [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"onAdd($event)\" autocomplete=\"off\" [errorStateMatcher]=\"matcher\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" [required]=\"required\" matInput #input>\r\n </mat-chip-list>\r\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event)\">\r\n <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"displayField ? item[displayField] : item\">\r\n <ng-container *ngIf=\"sdChipDisplay?.templateRef\">\r\n <ng-container *ngTemplateOutlet=\"sdChipDisplay.templateRef;context:{item: item}\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!sdChipDisplay?.templateRef\">\r\n {{ displayField ? item[displayField] : item }}\r\n </ng-container>\r\n </mat-option>\r\n </mat-autocomplete>\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?.minlength\">\r\n <ng-container *ngIf=\"!disableErrorMessage\">{{'Min length' | sdTranslate}} {{min}}\r\n </ng-container>\r\n </mat-error>\r\n <mat-error *ngIf=\" formControl?.errors?.maxlength\">\r\n <ng-container *ngIf=\"!disableErrorMessage\">{{'Max length' | sdTranslate}} {{max}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-template>\r\n</div>","styles":[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-form-field-infix{min-height:43.5px;padding:2px 0}:host ::ng-deep mat-form-field.c-md .mat-standard-chip{min-height:26px;padding:7px 10px}:host ::ng-deep mat-form-field.c-md .mat-standard-chip.mat-chip-with-trailing-icon{padding:7px 7px 7px 10px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"addable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"displayField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"_removable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["removable"]}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3},"arguments":["disableErrorMessage"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"cacheChecksum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"_required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3},"arguments":["required"]}]}],"pMin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3},"arguments":["min"]}]}],"pMax":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":3},"arguments":["max"]}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":151,"character":3}}]}],"sdUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":152,"character":3}}]}],"chipSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":153,"character":3}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":155,"character":3},"arguments":["input"]}]}],"matAutocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":156,"character":3},"arguments":["auto"]}]}],"chipList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":157,"character":3},"arguments":["chipList",{"static":true}]}]}],"autocompleteTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":158,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteTrigger","line":158,"character":13},{"read":{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteTrigger","line":158,"character":45}}]}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":159,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":159,"character":16}]}]}],"sdChipDisplay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":160,"character":3},"arguments":[{"__symbolic":"reference","name":"SdChipDisplayDef"}]}]}],"sdLabelDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":161,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdLabelDefDirective","line":161,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":170,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":170,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":170,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":169,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":170,"character":57}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SdChipUpdate":{"__symbolic":"interface"},"SdChipDisplayDef":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdChipDisplayDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":1,"character":1},"arguments":[{"name":"sdRemovableChip"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}]}}},"origins":{"SdChipModule":"./src/lib/chip.module","SdChip":"./src/lib/chip.component","SdChipUpdate":"./src/lib/chip.model","SdChipDisplayDef":"./src/lib/directives/sd-chip-display-def.directive","ɵa":"./src/lib/pipes/removable-chip.pipe"},"importAs":"@sd-angular/core/chip"}