ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
49 lines • 7.7 kB
JavaScript
import { Component, Input, Output, HostBinding, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SegmentedControlComponent {
get amDisabled() {
return this.disabled;
}
constructor() {
this.prefixCls = 'am-segment';
this.tintColor = '#2DB7F5';
this.disabled = false;
this.selectedIndex = 0;
this.onChange = new EventEmitter();
this.role = 'tablist';
this.amSegment = true;
}
onClick(index, value) {
if (!this.disabled && index !== this.selectedIndex) {
this.selectedIndex = index;
this.onChange.emit({ selectedIndex: index, value: value });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SegmentedControlComponent, selector: "SegmentedControl, nz-segmented-control", inputs: { tintColor: "tintColor", disabled: "disabled", selectedIndex: "selectedIndex", values: "values" }, outputs: { onChange: "onChange" }, host: { properties: { "attr.role": "this.role", "class.am-segment": "this.amSegment", "class.am-segment-disabled": "this.amDisabled" } }, ngImport: i0, template: "<div\n role=\"tab\"\n *ngFor=\"let value of values; let i = index\"\n class=\"{{ prefixCls }}-item\"\n [ngClass]=\"{ 'am-segment-item-selected': i === selectedIndex }\"\n [ngStyle]=\"{\n 'border-color': tintColor,\n color: i === selectedIndex ? '#fff' : tintColor,\n 'background-color': i === selectedIndex ? tintColor : 'transparent'\n }\"\n (click)=\"onClick(i, value)\"\n>\n <div\n class=\"{{ prefixCls }}-item-inner\"\n [ngStyle]=\"{ 'background-color': i === selectedIndex ? tintColor : 'transparent' }\"\n ></div>\n {{ value }}\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SegmentedControlComponent, decorators: [{
type: Component,
args: [{ selector: 'SegmentedControl, nz-segmented-control', template: "<div\n role=\"tab\"\n *ngFor=\"let value of values; let i = index\"\n class=\"{{ prefixCls }}-item\"\n [ngClass]=\"{ 'am-segment-item-selected': i === selectedIndex }\"\n [ngStyle]=\"{\n 'border-color': tintColor,\n color: i === selectedIndex ? '#fff' : tintColor,\n 'background-color': i === selectedIndex ? tintColor : 'transparent'\n }\"\n (click)=\"onClick(i, value)\"\n>\n <div\n class=\"{{ prefixCls }}-item-inner\"\n [ngStyle]=\"{ 'background-color': i === selectedIndex ? tintColor : 'transparent' }\"\n ></div>\n {{ value }}\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { tintColor: [{
type: Input
}], disabled: [{
type: Input
}], selectedIndex: [{
type: Input
}], values: [{
type: Input
}], onChange: [{
type: Output
}], role: [{
type: HostBinding,
args: ['attr.role']
}], amSegment: [{
type: HostBinding,
args: ['class.am-segment']
}], amDisabled: [{
type: HostBinding,
args: ['class.am-segment-disabled']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50ZWQtY29udHJvbC9zZWdtZW50ZWQtY29udHJvbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnRlZC1jb250cm9sL3NlZ21lbnRlZC1jb250cm9sLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxXQUFXLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPcEYsTUFBTSxPQUFPLHlCQUF5QjtJQWtCcEMsSUFDSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3ZCLENBQUM7SUFFRDtRQXRCQSxjQUFTLEdBQVcsWUFBWSxDQUFDO1FBR2pDLGNBQVMsR0FBVyxTQUFTLENBQUM7UUFFOUIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUUxQixrQkFBYSxHQUFXLENBQUMsQ0FBQztRQUkxQixhQUFRLEdBQWdELElBQUksWUFBWSxFQUFpQyxDQUFDO1FBRzFHLFNBQUksR0FBRyxTQUFTLENBQUM7UUFFakIsY0FBUyxHQUFZLElBQUksQ0FBQztJQU1YLENBQUM7SUFFaEIsT0FBTyxDQUFDLEtBQWEsRUFBRSxLQUFhO1FBQ2xDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ2xELElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1lBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztTQUM1RDtJQUNILENBQUM7OEdBOUJVLHlCQUF5QjtrR0FBekIseUJBQXlCLHVXQ1B0QywwakJBa0JBOzsyRkRYYSx5QkFBeUI7a0JBSnJDLFNBQVM7K0JBQ0Usd0NBQXdDO3dEQU9sRCxTQUFTO3NCQURSLEtBQUs7Z0JBR04sUUFBUTtzQkFEUCxLQUFLO2dCQUdOLGFBQWE7c0JBRFosS0FBSztnQkFHTixNQUFNO3NCQURMLEtBQUs7Z0JBR04sUUFBUTtzQkFEUCxNQUFNO2dCQUlQLElBQUk7c0JBREgsV0FBVzt1QkFBQyxXQUFXO2dCQUd4QixTQUFTO3NCQURSLFdBQVc7dUJBQUMsa0JBQWtCO2dCQUczQixVQUFVO3NCQURiLFdBQVc7dUJBQUMsMkJBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBIb3N0QmluZGluZywgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTZWdtZW50ZWRDb250cm9sT25DaGFuZ2VFdmVudCB9IGZyb20gJy4vUHJvcHNUeXBlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnU2VnbWVudGVkQ29udHJvbCwgbnotc2VnbWVudGVkLWNvbnRyb2wnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VnbWVudGVkLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFNlZ21lbnRlZENvbnRyb2xDb21wb25lbnQge1xuICBwcmVmaXhDbHM6IHN0cmluZyA9ICdhbS1zZWdtZW50JztcblxuICBASW5wdXQoKVxuICB0aW50Q29sb3I6IHN0cmluZyA9ICcjMkRCN0Y1JztcbiAgQElucHV0KClcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KClcbiAgc2VsZWN0ZWRJbmRleDogbnVtYmVyID0gMDtcbiAgQElucHV0KClcbiAgdmFsdWVzOiBBcnJheTxzdHJpbmc+W107XG4gIEBPdXRwdXQoKVxuICBvbkNoYW5nZTogRXZlbnRFbWl0dGVyPFNlZ21lbnRlZENvbnRyb2xPbkNoYW5nZUV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8U2VnbWVudGVkQ29udHJvbE9uQ2hhbmdlRXZlbnQ+KCk7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKVxuICByb2xlID0gJ3RhYmxpc3QnO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmFtLXNlZ21lbnQnKVxuICBhbVNlZ21lbnQ6IGJvb2xlYW4gPSB0cnVlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmFtLXNlZ21lbnQtZGlzYWJsZWQnKVxuICBnZXQgYW1EaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZDtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBvbkNsaWNrKGluZGV4OiBudW1iZXIsIHZhbHVlOiBzdHJpbmcpIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQgJiYgaW5kZXggIT09IHRoaXMuc2VsZWN0ZWRJbmRleCkge1xuICAgICAgdGhpcy5zZWxlY3RlZEluZGV4ID0gaW5kZXg7XG4gICAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoeyBzZWxlY3RlZEluZGV4OiBpbmRleCwgdmFsdWU6IHZhbHVlIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdlxuICByb2xlPVwidGFiXCJcbiAgKm5nRm9yPVwibGV0IHZhbHVlIG9mIHZhbHVlczsgbGV0IGkgPSBpbmRleFwiXG4gIGNsYXNzPVwie3sgcHJlZml4Q2xzIH19LWl0ZW1cIlxuICBbbmdDbGFzc109XCJ7ICdhbS1zZWdtZW50LWl0ZW0tc2VsZWN0ZWQnOiBpID09PSBzZWxlY3RlZEluZGV4IH1cIlxuICBbbmdTdHlsZV09XCJ7XG4gICAgJ2JvcmRlci1jb2xvcic6IHRpbnRDb2xvcixcbiAgICBjb2xvcjogaSA9PT0gc2VsZWN0ZWRJbmRleCA/ICcjZmZmJyA6IHRpbnRDb2xvcixcbiAgICAnYmFja2dyb3VuZC1jb2xvcic6IGkgPT09IHNlbGVjdGVkSW5kZXggPyB0aW50Q29sb3IgOiAndHJhbnNwYXJlbnQnXG4gIH1cIlxuICAoY2xpY2spPVwib25DbGljayhpLCB2YWx1ZSlcIlxuPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJ7eyBwcmVmaXhDbHMgfX0taXRlbS1pbm5lclwiXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGkgPT09IHNlbGVjdGVkSW5kZXggPyB0aW50Q29sb3IgOiAndHJhbnNwYXJlbnQnIH1cIlxuICA+PC9kaXY+XG4gIHt7IHZhbHVlIH19XG48L2Rpdj5cbiJdfQ==