ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
91 lines • 12.2 kB
JavaScript
import { Component, ViewEncapsulation, Input, forwardRef } from '@angular/core';
import { PickerComponent } from 'ng-zorro-antd-mobile/picker';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class PickerViewComponent extends PickerComponent {
constructor() {
super(...arguments);
this.data = [];
this.cols = 3;
this.indicatorStyle = {};
this.itemStyle = {};
}
pickerViewInit() {
this.options.data = this.data;
this.options.cols = this.cols;
this.options.cascade = this.cascade;
this.init();
}
init() {
this.selectedTarget = [];
if (this.dataForRender.length === 0 && this.generateArrayData(this.options.data).length > 0) {
this.dataForRender.push(this.generateArrayData(this.options.data));
}
if (this.options.value.length > 0) {
this.getInitValueIndex(this.dataForRender);
}
else {
for (let index = 0; index < this.dataForRender.length; index++) {
this.selectedTarget.push({ targetId: `${index}`, currentY: 0 });
}
}
setTimeout(() => {
this.reloadPicker();
});
}
writeValue(value) {
if (value) {
this.options.value = value;
this.init();
}
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) { }
ngOnInit() {
this.pickerViewInit();
}
ngOnChanges(changes) {
if (changes.cols) {
this.dataForRender = [];
}
if (changes.data || changes.cols) {
this.pickerViewInit();
}
}
ngAfterViewInit() {
this.currentPicker = this.elementRef.nativeElement;
this.reloadPicker();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PickerViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PickerViewComponent, selector: "PickerView, nzm-picker-view", inputs: { data: "data", cols: "cols", cascade: "cascade", indicatorStyle: "indicatorStyle", itemStyle: "itemStyle" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PickerViewComponent),
multi: true
}
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #picker class=\"am-picker\" style=\"flex-direction: row; align-items: center;\">\n <div *ngFor=\"let item of dataForRender; let i = index\" class=\"am-picker-col\">\n <div #indicator class=\"am-picker-col-indicator \" [ngStyle]=\"indicatorStyle\"></div>\n <div id=\"{{ i }}\" class=\"am-picker-col-mask\" style=\"background-size: 100% 102px;\"></div>\n <div class=\"am-picker-col-content\">\n <div *ngFor=\"let val of item; let i = index\" id=\"{{ i }}\" class=\"am-picker-col-item\" [ngStyle]=\"itemStyle\">\n {{ val.label ? val.label : val }}\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PickerViewComponent, decorators: [{
type: Component,
args: [{ selector: 'PickerView, nzm-picker-view', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PickerViewComponent),
multi: true
}
], template: "<div #picker class=\"am-picker\" style=\"flex-direction: row; align-items: center;\">\n <div *ngFor=\"let item of dataForRender; let i = index\" class=\"am-picker-col\">\n <div #indicator class=\"am-picker-col-indicator \" [ngStyle]=\"indicatorStyle\"></div>\n <div id=\"{{ i }}\" class=\"am-picker-col-mask\" style=\"background-size: 100% 102px;\"></div>\n <div class=\"am-picker-col-content\">\n <div *ngFor=\"let val of item; let i = index\" id=\"{{ i }}\" class=\"am-picker-col-item\" [ngStyle]=\"itemStyle\">\n {{ val.label ? val.label : val }}\n </div>\n </div>\n </div>\n</div>\n" }]
}], propDecorators: { data: [{
type: Input
}], cols: [{
type: Input
}], cascade: [{
type: Input
}], indicatorStyle: [{
type: Input
}], itemStyle: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlja2VyLXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9waWNrZXItdmlldy9waWNrZXItdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9jb21wb25lbnRzL3BpY2tlci12aWV3L3BpY2tlci12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsaUJBQWlCLEVBQWlCLEtBQUssRUFBRSxVQUFVLEVBQTRCLE1BQU0sZUFBZSxDQUFDO0FBQ2pJLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQWN6RSxNQUFNLE9BQU8sbUJBQW9CLFNBQVEsZUFBZTtJQVp4RDs7UUFlRSxTQUFJLEdBQWUsRUFBRSxDQUFDO1FBRXRCLFNBQUksR0FBVyxDQUFDLENBQUM7UUFJakIsbUJBQWMsR0FBVyxFQUFFLENBQUM7UUFFNUIsY0FBUyxHQUFXLEVBQUUsQ0FBQztLQXdEeEI7SUF0REMsY0FBYztRQUNaLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDOUIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztRQUM5QixJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNkLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLGNBQWMsR0FBRyxFQUFFLENBQUM7UUFDekIsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUMzRixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1NBQ3BFO1FBQ0QsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ2pDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDNUM7YUFBTTtZQUNMLEtBQUssSUFBSSxLQUFLLEdBQUcsQ0FBQyxFQUFFLEtBQUssR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRTtnQkFDOUQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxRQUFRLEVBQUUsR0FBRyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzthQUNqRTtTQUNGO1FBQ0QsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN0QixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxVQUFVLENBQUMsS0FBWTtRQUNyQixJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztZQUMzQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDYjtJQUNILENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFzQjtRQUNyQyxJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBUyxJQUFTLENBQUM7SUFFckMsUUFBUTtRQUNOLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLElBQUksRUFBRTtZQUNoQixJQUFJLENBQUMsYUFBYSxHQUFHLEVBQUUsQ0FBQztTQUN6QjtRQUNELElBQUksT0FBTyxDQUFDLElBQUksSUFBSSxPQUFPLENBQUMsSUFBSSxFQUFFO1lBQ2hDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztTQUN2QjtJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztRQUNuRCxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdEIsQ0FBQzs4R0FsRVUsbUJBQW1CO2tHQUFuQixtQkFBbUIsNEtBUm5CO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztnQkFDbEQsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLHNFQ2RILDJtQkFXQTs7MkZES2EsbUJBQW1CO2tCQVovQixTQUFTOytCQUNFLDZCQUE2QixpQkFFeEIsaUJBQWlCLENBQUMsSUFBSSxhQUMxQjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxvQkFBb0IsQ0FBQzs0QkFDbEQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7OEJBS0QsSUFBSTtzQkFESCxLQUFLO2dCQUdOLElBQUk7c0JBREgsS0FBSztnQkFHTixPQUFPO3NCQUROLEtBQUs7Z0JBR04sY0FBYztzQkFEYixLQUFLO2dCQUdOLFNBQVM7c0JBRFIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBWaWV3RW5jYXBzdWxhdGlvbiwgQWZ0ZXJWaWV3SW5pdCwgSW5wdXQsIGZvcndhcmRSZWYsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnbmctem9ycm8tYW50ZC1tb2JpbGUvcGlja2VyJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnUGlja2VyVmlldywgbnptLXBpY2tlci12aWV3JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BpY2tlci12aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBQaWNrZXJWaWV3Q29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFBpY2tlclZpZXdDb21wb25lbnQgZXh0ZW5kcyBQaWNrZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQsIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBPbkNoYW5nZXMge1xuICBvcHRpb25zO1xuICBASW5wdXQoKVxuICBkYXRhOiBBcnJheTxhbnk+ID0gW107XG4gIEBJbnB1dCgpXG4gIGNvbHM6IG51bWJlciA9IDM7XG4gIEBJbnB1dCgpXG4gIGNhc2NhZGU6IGJvb2xlYW47XG4gIEBJbnB1dCgpXG4gIGluZGljYXRvclN0eWxlOiBvYmplY3QgPSB7fTtcbiAgQElucHV0KClcbiAgaXRlbVN0eWxlOiBvYmplY3QgPSB7fTtcblxuICBwaWNrZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLm9wdGlvbnMuZGF0YSA9IHRoaXMuZGF0YTtcbiAgICB0aGlzLm9wdGlvbnMuY29scyA9IHRoaXMuY29scztcbiAgICB0aGlzLm9wdGlvbnMuY2FzY2FkZSA9IHRoaXMuY2FzY2FkZTtcbiAgICB0aGlzLmluaXQoKTtcbiAgfVxuXG4gIGluaXQoKSB7XG4gICAgdGhpcy5zZWxlY3RlZFRhcmdldCA9IFtdO1xuICAgIGlmICh0aGlzLmRhdGFGb3JSZW5kZXIubGVuZ3RoID09PSAwICYmIHRoaXMuZ2VuZXJhdGVBcnJheURhdGEodGhpcy5vcHRpb25zLmRhdGEpLmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMuZGF0YUZvclJlbmRlci5wdXNoKHRoaXMuZ2VuZXJhdGVBcnJheURhdGEodGhpcy5vcHRpb25zLmRhdGEpKTtcbiAgICB9XG4gICAgaWYgKHRoaXMub3B0aW9ucy52YWx1ZS5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLmdldEluaXRWYWx1ZUluZGV4KHRoaXMuZGF0YUZvclJlbmRlcik7XG4gICAgfSBlbHNlIHtcbiAgICAgIGZvciAobGV0IGluZGV4ID0gMDsgaW5kZXggPCB0aGlzLmRhdGFGb3JSZW5kZXIubGVuZ3RoOyBpbmRleCsrKSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRUYXJnZXQucHVzaCh7IHRhcmdldElkOiBgJHtpbmRleH1gLCBjdXJyZW50WTogMCB9KTtcbiAgICAgIH1cbiAgICB9XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLnJlbG9hZFBpY2tlcigpO1xuICAgIH0pO1xuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55W10pOiB2b2lkIHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHRoaXMub3B0aW9ucy52YWx1ZSA9IHZhbHVlO1xuICAgICAgdGhpcy5pbml0KCk7XG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKF86IGFueVtdKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueVtdKTogdm9pZCB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMucGlja2VyVmlld0luaXQoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlcy5jb2xzKSB7XG4gICAgICB0aGlzLmRhdGFGb3JSZW5kZXIgPSBbXTtcbiAgICB9XG4gICAgaWYgKGNoYW5nZXMuZGF0YSB8fCBjaGFuZ2VzLmNvbHMpIHtcbiAgICAgIHRoaXMucGlja2VyVmlld0luaXQoKTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5jdXJyZW50UGlja2VyID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgdGhpcy5yZWxvYWRQaWNrZXIoKTtcbiAgfVxufVxuIiwiPGRpdiAjcGlja2VyIGNsYXNzPVwiYW0tcGlja2VyXCIgc3R5bGU9XCJmbGV4LWRpcmVjdGlvbjogcm93OyBhbGlnbi1pdGVtczogY2VudGVyO1wiPlxuICA8ZGl2ICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRhdGFGb3JSZW5kZXI7IGxldCBpID0gaW5kZXhcIiBjbGFzcz1cImFtLXBpY2tlci1jb2xcIj5cbiAgICA8ZGl2ICNpbmRpY2F0b3IgY2xhc3M9XCJhbS1waWNrZXItY29sLWluZGljYXRvciBcIiBbbmdTdHlsZV09XCJpbmRpY2F0b3JTdHlsZVwiPjwvZGl2PlxuICAgIDxkaXYgaWQ9XCJ7eyBpIH19XCIgY2xhc3M9XCJhbS1waWNrZXItY29sLW1hc2tcIiBzdHlsZT1cImJhY2tncm91bmQtc2l6ZTogMTAwJSAxMDJweDtcIj48L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiYW0tcGlja2VyLWNvbC1jb250ZW50XCI+XG4gICAgICA8ZGl2ICpuZ0Zvcj1cImxldCB2YWwgb2YgaXRlbTsgbGV0IGkgPSBpbmRleFwiIGlkPVwie3sgaSB9fVwiIGNsYXNzPVwiYW0tcGlja2VyLWNvbC1pdGVtXCIgW25nU3R5bGVdPVwiaXRlbVN0eWxlXCI+XG4gICAgICAgIHt7IHZhbC5sYWJlbCA/IHZhbC5sYWJlbCA6IHZhbCB9fVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=