ng-devui
Version:
DevUI components based on Angular
43 lines • 9.8 kB
JavaScript
import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ng-devui/tags";
export class ToggleMenuLabelComponent {
constructor() {
this.multiItems = [];
this.disabled = false;
this.optionDisabledKey = '';
this.removeChange = new EventEmitter();
}
trackByOptionPointer(index, item) {
return item.option;
}
removeItem(item, event, index) {
this.removeChange.emit({ ...item, event, index });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleMenuLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleMenuLabelComponent, selector: "d-toggle-menu-label", inputs: { mode: "mode", multiItems: "multiItems", disabled: "disabled", maxWidth: "maxWidth", maxHeight: "maxHeight", optionDisabledKey: "optionDisabledKey", customViewTemplate: "customViewTemplate", valueParser: "valueParser" }, outputs: { removeChange: "removeChange" }, ngImport: i0, template: "<ul class=\"devui-select-tag-list devui-scrollbar {{ mode }}\" [style.maxHeight]=\"maxHeight\" *ngIf=\"multiItems.length > 0\">\n <li\n class=\"devui-select-tag-item\"\n *ngFor=\"let item of multiItems; let index = index; trackBy: trackByOptionPointer\"\n [style.maxWidth]=\"maxWidth\"\n [ngClass]=\"{\n disabled: disabled || (optionDisabledKey && item.option[optionDisabledKey])\n }\"\n >\n <d-tag\n [deletable]=\"!(disabled || (optionDisabledKey && item.option[optionDisabledKey]))\"\n [maxWidth]=\"'100%'\"\n [tag]=\"valueParser(item.option)\"\n [customViewTemplate]=\"customViewTemplate\"\n (tagDelete)=\"removeItem(item, $event?.event, index)\"\n ></d-tag>\n </li>\n</ul>\n", styles: [".devui-select-tag-list{margin:0;padding:0;list-style-type:none;overflow:hidden}.devui-select-tag-list.normal{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-select-tag-list.scroll-y{overflow-y:auto;overflow-x:hidden}.devui-select-tag-list.multiple-line{height:auto;overflow-y:auto;overflow-x:hidden;line-height:1;max-height:48px;min-height:24px}.devui-select-tag-item{display:inline-block;margin:2px 0 0 2px}:host ::ng-deep .devui-select-tag-item{max-width:100%}:host ::ng-deep .devui-select-tag-item d-tag{width:100%}:host ::ng-deep .devui-select-tag-item d-tag .devui-tag-item>span{vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:100%}:host ::ng-deep .devui-select-tag-item.disabled{line-height:18px}:host ::ng-deep .devui-select-tag-item.disabled d-tag .devui-tag-item{border:solid 1px var(--devui-disabled-line, #e6e6e6);line-height:18px;background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TagComponent, selector: "d-tag", inputs: ["tag", "labelStyle", "customColor", "deletable", "titleContent", "mode", "size", "checked", "maxWidth", "customViewTemplate", "beforeDelete"], outputs: ["tagDelete", "checkedChange"], exportAs: ["Tag"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleMenuLabelComponent, decorators: [{
type: Component,
args: [{ selector: 'd-toggle-menu-label', template: "<ul class=\"devui-select-tag-list devui-scrollbar {{ mode }}\" [style.maxHeight]=\"maxHeight\" *ngIf=\"multiItems.length > 0\">\n <li\n class=\"devui-select-tag-item\"\n *ngFor=\"let item of multiItems; let index = index; trackBy: trackByOptionPointer\"\n [style.maxWidth]=\"maxWidth\"\n [ngClass]=\"{\n disabled: disabled || (optionDisabledKey && item.option[optionDisabledKey])\n }\"\n >\n <d-tag\n [deletable]=\"!(disabled || (optionDisabledKey && item.option[optionDisabledKey]))\"\n [maxWidth]=\"'100%'\"\n [tag]=\"valueParser(item.option)\"\n [customViewTemplate]=\"customViewTemplate\"\n (tagDelete)=\"removeItem(item, $event?.event, index)\"\n ></d-tag>\n </li>\n</ul>\n", styles: [".devui-select-tag-list{margin:0;padding:0;list-style-type:none;overflow:hidden}.devui-select-tag-list.normal{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-select-tag-list.scroll-y{overflow-y:auto;overflow-x:hidden}.devui-select-tag-list.multiple-line{height:auto;overflow-y:auto;overflow-x:hidden;line-height:1;max-height:48px;min-height:24px}.devui-select-tag-item{display:inline-block;margin:2px 0 0 2px}:host ::ng-deep .devui-select-tag-item{max-width:100%}:host ::ng-deep .devui-select-tag-item d-tag{width:100%}:host ::ng-deep .devui-select-tag-item d-tag .devui-tag-item>span{vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:100%}:host ::ng-deep .devui-select-tag-item.disabled{line-height:18px}:host ::ng-deep .devui-select-tag-item.disabled d-tag .devui-tag-item{border:solid 1px var(--devui-disabled-line, #e6e6e6);line-height:18px;background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}\n"] }]
}], propDecorators: { mode: [{
type: Input
}], multiItems: [{
type: Input
}], disabled: [{
type: Input
}], maxWidth: [{
type: Input
}], maxHeight: [{
type: Input
}], optionDisabledKey: [{
type: Input
}], customViewTemplate: [{
type: Input
}], valueParser: [{
type: Input
}], removeChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLW1lbnUtbGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vZGV2dWkvdG9nZ2xlLW1lbnUvdG9nZ2xlLW1lbnUtbGFiZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZGV2dWkvdG9nZ2xlLW1lbnUvdG9nZ2xlLW1lbnUtbGFiZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRcEYsTUFBTSxPQUFPLHdCQUF3QjtJQUxyQztRQU9XLGVBQVUsR0FBOEIsRUFBRSxDQUFDO1FBQzNDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHakIsc0JBQWlCLEdBQUcsRUFBRSxDQUFDO1FBR3RCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztLQVNsRDtJQVBDLG9CQUFvQixDQUFDLEtBQUssRUFBRSxJQUFJO1FBQzlCLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBRUQsVUFBVSxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSztRQUMzQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQ3BELENBQUM7K0dBakJVLHdCQUF3QjttR0FBeEIsd0JBQXdCLDRVQ1JyQyw4dEJBa0JBOzs0RkRWYSx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0UscUJBQXFCOzhCQUt0QixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBQ0csa0JBQWtCO3NCQUExQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0ksWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVG9nZ2xlTWVudUxpc3RJdGVtIH0gZnJvbSAnLi90b2dnbGUtbWVudS50eXBlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZC10b2dnbGUtbWVudS1sYWJlbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi90b2dnbGUtbWVudS1sYWJlbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogW2AuL3RvZ2dsZS1tZW51LWxhYmVsLmNvbXBvbmVudC5zY3NzYF0sXG59KVxuZXhwb3J0IGNsYXNzIFRvZ2dsZU1lbnVMYWJlbENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1vZGU6ICdub3JtYWwnIHwgJ3Njcm9sbC15JyB8ICdtdWx0aXBsZS1saW5lJyB8IHN0cmluZztcbiAgQElucHV0KCkgbXVsdGlJdGVtczogQXJyYXk8VG9nZ2xlTWVudUxpc3RJdGVtPiA9IFtdO1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuICBASW5wdXQoKSBtYXhXaWR0aDogc3RyaW5nO1xuICBASW5wdXQoKSBtYXhIZWlnaHQ6IHN0cmluZztcbiAgQElucHV0KCkgb3B0aW9uRGlzYWJsZWRLZXkgPSAnJztcbiAgQElucHV0KCkgY3VzdG9tVmlld1RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBASW5wdXQoKSB2YWx1ZVBhcnNlcjogKGl0ZW06IGFueSkgPT4gYW55O1xuICBAT3V0cHV0KCkgcmVtb3ZlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgdHJhY2tCeU9wdGlvblBvaW50ZXIoaW5kZXgsIGl0ZW0pIHtcbiAgICByZXR1cm4gaXRlbS5vcHRpb247XG4gIH1cblxuICByZW1vdmVJdGVtKGl0ZW0sIGV2ZW50LCBpbmRleCkge1xuICAgIHRoaXMucmVtb3ZlQ2hhbmdlLmVtaXQoeyAuLi5pdGVtLCBldmVudCwgaW5kZXggfSk7XG4gIH1cbn1cbiIsIjx1bCBjbGFzcz1cImRldnVpLXNlbGVjdC10YWctbGlzdCBkZXZ1aS1zY3JvbGxiYXIge3sgbW9kZSB9fVwiIFtzdHlsZS5tYXhIZWlnaHRdPVwibWF4SGVpZ2h0XCIgKm5nSWY9XCJtdWx0aUl0ZW1zLmxlbmd0aCA+IDBcIj5cbiAgPGxpXG4gICAgY2xhc3M9XCJkZXZ1aS1zZWxlY3QtdGFnLWl0ZW1cIlxuICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIG11bHRpSXRlbXM7IGxldCBpbmRleCA9IGluZGV4OyB0cmFja0J5OiB0cmFja0J5T3B0aW9uUG9pbnRlclwiXG4gICAgW3N0eWxlLm1heFdpZHRoXT1cIm1heFdpZHRoXCJcbiAgICBbbmdDbGFzc109XCJ7XG4gICAgICBkaXNhYmxlZDogZGlzYWJsZWQgfHwgKG9wdGlvbkRpc2FibGVkS2V5ICYmIGl0ZW0ub3B0aW9uW29wdGlvbkRpc2FibGVkS2V5XSlcbiAgICB9XCJcbiAgPlxuICAgIDxkLXRhZ1xuICAgICAgW2RlbGV0YWJsZV09XCIhKGRpc2FibGVkIHx8IChvcHRpb25EaXNhYmxlZEtleSAmJiBpdGVtLm9wdGlvbltvcHRpb25EaXNhYmxlZEtleV0pKVwiXG4gICAgICBbbWF4V2lkdGhdPVwiJzEwMCUnXCJcbiAgICAgIFt0YWddPVwidmFsdWVQYXJzZXIoaXRlbS5vcHRpb24pXCJcbiAgICAgIFtjdXN0b21WaWV3VGVtcGxhdGVdPVwiY3VzdG9tVmlld1RlbXBsYXRlXCJcbiAgICAgICh0YWdEZWxldGUpPVwicmVtb3ZlSXRlbShpdGVtLCAkZXZlbnQ/LmV2ZW50LCBpbmRleClcIlxuICAgID48L2QtdGFnPlxuICA8L2xpPlxuPC91bD5cbiJdfQ==