@sd-angular/core
Version:
Sd Angular Core Lib
157 lines (150 loc) • 10.7 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Input, Output, ContentChild, HostListener, Directive, TemplateRef, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { __classPrivateFieldGet } from 'tslib';
import { SdLabelDefDirective, SdCommonModule } from '@sd-angular/core/common';
import { Subscription, Subject } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { MatSelectModule } from '@angular/material/select';
import { SdTranslateModule } from '@sd-angular/core/translate';
import { MatCheckboxModule } from '@angular/material/checkbox';
var _subscription, _modelChanges;
class SdSelectBadge {
constructor(ref) {
this.ref = ref;
// Items
this.items = [];
this.modelChange = new EventEmitter();
this.sdChange = new EventEmitter();
this.sdSelection = new EventEmitter();
_subscription.set(this, new Subscription());
_modelChanges.set(this, new Subject());
this.isShowContent = false;
this.onToogle = () => {
this.isShowContent = !this.isShowContent;
};
this.onModelChange = (val) => {
this.modelChange.emit(val);
this.sdChange.emit(val);
};
}
set model(val) {
if (this.value !== val) {
this.value = val;
__classPrivateFieldGet(this, _modelChanges).next(val);
}
}
set _items(items) {
if (!Array.isArray(items)) {
this.items = [];
}
this.items = items;
}
clickout(event) {
if (!this.selectbadge.nativeElement.contains(event.target)) {
this.isShowContent = false;
}
}
ngOnInit() {
__classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _modelChanges).pipe(startWith(this.value)).subscribe(() => {
var _a;
this.selectedItem = (_a = this.items) === null || _a === void 0 ? void 0 : _a.find(e => { var _a, _b; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === ((_b = e === null || e === void 0 ? void 0 : e[this.valueField]) === null || _b === void 0 ? void 0 : _b.toString()); });
}));
}
onSelected(item) {
var _a;
this.selectedItem = item;
const emitVal = this.selectedItem[this.valueField];
this.modelChange.emit(emitVal);
this.sdChange.emit(emitVal);
this.sdSelection.emit({
value: emitVal,
item: (_a = this.items) === null || _a === void 0 ? void 0 : _a.find(e => { var _a; return (emitVal === null || emitVal === void 0 ? void 0 : emitVal.toString()) === ((_a = e === null || e === void 0 ? void 0 : e[this.valueField]) === null || _a === void 0 ? void 0 : _a.toString()); })
});
}
}
_subscription = new WeakMap(), _modelChanges = new WeakMap();
SdSelectBadge.decorators = [
{ type: Component, args: [{
selector: 'sd-select-badge',
template: "<ng-container *ngIf=\"sdLabelDef?.templateRef\">\r\n <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"label&&!sdLabelDef?.templateRef\" 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>",
changeDetection: ChangeDetectionStrategy.OnPush,
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}"]
},] }
];
SdSelectBadge.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
SdSelectBadge.propDecorators = {
selectbadge: [{ type: ViewChild, args: ['selectbadge',] }],
label: [{ type: Input }],
placeholder: [{ type: Input }],
model: [{ type: Input }],
_items: [{ type: Input, args: ['items',] }],
valueField: [{ type: Input }],
displayField: [{ type: Input }],
iconField: [{ type: Input }],
iconColorField: [{ type: Input }],
descriptionField: [{ type: Input }],
modelChange: [{ type: Output }],
sdChange: [{ type: Output }],
sdSelection: [{ type: Output }],
sdLabelDef: [{ type: ContentChild, args: [SdLabelDefDirective,] }],
clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
};
class SdSelectBadgeDisplayDefDirective {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
SdSelectBadgeDisplayDefDirective.decorators = [
{ type: Directive, args: [{
selector: '[sdSelectBadgeDisplayDef]'
},] }
];
SdSelectBadgeDisplayDefDirective.ctorParameters = () => [
{ type: TemplateRef }
];
class SdSelectBadgeModule {
}
SdSelectBadgeModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatTooltipModule,
MatFormFieldModule,
MatIconModule,
MatSelectModule,
MatProgressSpinnerModule,
MatCheckboxModule,
SdTranslateModule,
SdCommonModule
],
declarations: [
SdSelectBadge,
SdSelectBadgeDisplayDefDirective
],
exports: [
SdSelectBadge,
SdSelectBadgeDisplayDefDirective,
SdCommonModule
],
providers: []
},] }
];
/*
* Public API Surface of superdev-angular-core
*/
/**
* Generated bundle index. Do not edit.
*/
export { SdSelectBadge, SdSelectBadgeDisplayDefDirective, SdSelectBadgeModule };
//# sourceMappingURL=sd-angular-core-select-badge.js.map